javascript dom menetapkan pilihan butang radio

DOM (Document Object Model) ialah API (Antara Muka Pengaturcaraan Aplikasi) untuk memproses dokumen HTML dan XML. Ia menyediakan cara untuk mengakses dokumen, membolehkan pembangun menukar struktur dan kandungan halaman melalui skrip JavaScript. Dalam pembangunan web, DOM adalah sangat penting, jadi sangat berguna untuk memahami cara menetapkan pilihan butang radio dalam DOM.

Butang radio ialah elemen bentuk HTML yang biasanya digunakan untuk membolehkan pengguna memilih satu daripada berbilang pilihan. Dalam DOM, untuk menetapkan pilihan butang radio, kita boleh menggunakan dua kaedah berikut:

1. Gunakan atribut checked

Dengan menetapkan butang radio checked Atribut, kita boleh memilih pilihan butang radio. Sebagai contoh, kita boleh mencipta sekumpulan butang radio dan menetapkan atribut checked kepada salah satu daripadanya untuk memilihnya:

<label>
  <input type="radio" name="fruit" value="apple" checked>
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="pear">
  Pear
</label>

Dalam contoh di atas, kami menetapkan atribut checked kepada butang radio pertama untuk Pilihnya. Ambil perhatian bahawa ini akan menjadikan butang radio pertama dipilih secara lalai, walaupun pengguna tidak mengklik padanya.

Untuk mengakses dan mengubah suai atribut checked butang radio menggunakan JavaScript, kita boleh menggunakan kod berikut:

// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');

// 检查单选框是否处于选中状态
console.log(appleRadio.checked); // true

// 设置单选框为选中状态
appleRadio.checked = true;

// 取消单选框的选中状态
appleRadio.checked = false;

Dalam kod di atas, kita mula-mula mendapat nilai "epal" elemen butang radio dan kemudian akses atribut checkednya. Kami juga boleh menggunakan atribut checked untuk menetapkan keadaan butang radio yang dipilih Contohnya, jika anda menetapkan true padanya, anda boleh menetapkan butang radio kepada keadaan yang dipilih jika anda menetapkan false kepadanya , anda boleh membatalkan butang radio Keadaan kotak yang dipilih.

2. Gunakan kaedah setAttribute

Selain menggunakan atribut checked, kita juga boleh menggunakan kaedah setAttribute untuk menetapkan pilihan radio butang. Sebagai contoh, kita boleh mencipta kumpulan butang radio dan menggunakan kaedah setAttribute untuk memilih salah satu pilihan:

<label>
  <input type="radio" name="fruit" value="apple">
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="pear">
  Pear
</label>

// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');

// 使用setAttribute方法设置单选框为选中状态
appleRadio.setAttribute("checked", "checked");

Dalam kod di atas, kami menggunakan kaedah querySelector untuk mendapatkan nilai "epal " elemen butang radio dan kemudian gunakan kaedah setAttribute untuk menetapkannya kepada keadaan yang dipilih.

Perlu diambil perhatian bahawa menggunakan kaedah setAttribute untuk menetapkan keadaan butang radio yang dipilih juga akan dipaparkan dalam kod sumber HTML, tetapi menggunakan atribut checked tidak akan dipaparkan. Selain itu, ia juga disyorkan untuk menggunakan atribut checked untuk menetapkan keadaan butang radio yang dipilih kerana ia lebih ringkas dan lebih mudah difahami.

Ringkasan

Dalam DOM, menetapkan pilihan butang radio boleh dilakukan melalui atribut checked atau kaedah setAttribute. Walaupun kedua-dua kaedah boleh mencapai kesan yang sama, adalah disyorkan untuk menggunakan atribut checked kerana kodnya lebih ringkas, lebih mudah difahami dan lebih mudah untuk dikendalikan. Dalam projek sebenar, terpulang kepada pembangun untuk menentukan kaedah yang hendak digunakan.

Atas ialah kandungan terperinci javascript dom menetapkan pilihan butang radio. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!