Oke, jadi saya mempraktikkan JS dan HTML saya, kode saya saat ini terlihat seperti ini:

document.querySelector('input[name="answer"]:checked').checked = false;
let Select = document.querySelector('input[name="answer"]');
Select.addEventListener('change', function(event) {
  alert(event.target.value)
})
<div>
  <label><input type="radio" name="answer" value="1" checked="checked">1</label>
  <label><input type="radio" name="answer" value="2">2</label>
</div>

Tujuan saya adalah untuk membatalkan "dicentang" radio pertama, lalu menambahkan acara yang akan menampilkan setiap nilai radio setiap kali saya memilih/"memeriksanya", tetapi seperti yang Anda perhatikan, sejauh ini peringatan hanya akan muncul jika saya memilih yang pertama radio. Jadi jika saya boleh bertanya, di mana saya melakukan kesalahan dan bagaimana cara memperbaikinya?

Hal. Demi berlatih, HTML harus tetap sama. Tidak menambahkan Id atau pemilih lainnya.

1
李伯均 1 Oktober 2021, 08:53

3 jawaban

Jawaban Terbaik
  1. Anda hanya mendapatkan yang pertama dengan querySelector
  2. QuerySelector(...:checked) akan berfungsi karena Anda hanya dapat memiliki satu radio yang diperiksa
  3. Anda benar-benar harus mendelegasikan - disarankan dan sangat masuk akal
document.querySelector('input[name="answer"]:checked').checked = false;
let radDiv = document.getElementById('radioDiv');
radDiv.addEventListener('change', function(event) {
  const tgt = event.target;
  if (tgt.type === "radio" && tgt.name === "answer") { // check we have the right elements
    alert(tgt.value)
  }
})
<div id="radioDiv">
  <label><input type="radio" name="answer" value="1" checked="checked">1</label>
  <label><input type="radio" name="answer" value="2">2</label>
</div>
0
mplungjan 1 Oktober 2021, 06:56
document.querySelector('input[name="answer"]:checked').checked = false;

let Select = document.querySelectorAll('input[name="answer"]');

 Select.forEach(el => el.addEventListener('change',function (event) {
    Select.forEach(e => alert(e.value));
 }))
<div>
      <label><input type="radio" name="answer" value="1" checked="checked">1</label>
      <label><input type="radio" name="answer" value="2">2</label>
    </div>
0
navnath 1 Oktober 2021, 06:10
let Select = document.querySelectorAll('input[name="answer"]');
Select.forEach(function(elem) {
    elem.addEventListener("change", function(event) {
        alert(event.target.value)
    });
});

Gunakan di atas untuk pemilih elemen alih-alih querySelector yang mengembalikan satu objek (kecocokan pertama) querySelectorAll mengembalikan larik elemen.

-1
userDuR 1 Oktober 2021, 06:06