jquery secara dinamik memperoleh nilai sama ada kotak semak dipilih

Dalam pembangunan web, selalunya diperlukan untuk mendapatkan status kotak pilihan yang disemak. Menggunakan jQuery boleh memudahkan proses ini.

jQuery ialah perpustakaan JavaScript yang pantas, kecil dan kaya dengan ciri. Ia menyediakan API JavaScript yang mudah dan dipermudahkan untuk traversal dan manipulasi dokumen HTML, pengendalian acara, animasi, Ajax dan operasi lain. Falsafah reka bentuk jQuery ialah "Tulis kurang, lakukan lebih banyak". Ia boleh membantu pembangun menggunakan kod mudah untuk melaksanakan fungsi yang kompleks. Dalam pembangunan bahagian hadapan, jQuery telah menjadi alat penting.

Apabila menggunakan jQuery untuk mendapatkan keadaan pilihan kotak semak, anda perlu menggunakan pemilih jQuery untuk memilih elemen untuk dikendalikan, dan kemudian mendapatkan keadaan yang dipilih melalui kaedah yang disediakan oleh jQuery.

Berikut ialah contoh mudah:

<input type="checkbox" id="checkbox1" name="option1" value="1">选项1
<input type="checkbox" id="checkbox2" name="option2" value="2">选项2
<input type="checkbox" id="checkbox3" name="option3" value="3">选项3
<button id="submitBtn">提交</button>

<script>
$(function() {
  $('#submitBtn').on('click', function() {
    var checkedVals = $('input[name="option"]:checked').map(function() {
      return this.value;
    }).get();
    console.log('选中的值为：' + checkedVals.join(', '));
  });
});
</script>

Dalam contoh di atas, terdapat tiga kotak pilihan dan satu butang. Apabila butang diklik, kod mendapat nilai kotak pilihan yang dipilih dan mencetaknya ke konsol.

Kaedah yang terlibat dalam kod adalah:

• $('#submitBtn').on('click', function() {...}): Fungsi dilaksanakan apabila butang diklik.
• $('input[name="option"]:checked'): Pilih semua kotak semak yang namanya "pilihan" dan dipilih.
• .map(function() {...}): Petakan nilai kotak semak yang dipilih melalui nilai pulangan fungsi.
• .get(): Tukar nilai yang dipetakan kepada jenis tatasusunan.

Melalui kaedah ini, anda boleh mendapatkan status kotak semak dengan mudah.

Sudah tentu, terdapat cara lain untuk mendapatkan status kotak pilihan yang disemak. Sebagai contoh, anda boleh menggunakan kaedah asli JavaScript:

var checkboxes = document.querySelectorAll('input[name="option"]');
var checkedVals = [];

for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkedVals.push(checkboxes[i].value);
  }
}

console.log('选中的值为：' + checkedVals.join(', '));

Menggunakan kaedah ini, anda perlu melintasi semua kotak semak secara manual, menentukan sama ada ia dipilih dan menyimpan nilai yang dipilih dalam tatasusunan.

Secara amnya, jQuery menyediakan cara yang mudah dan mudah untuk mendapatkan status kotak pilihan yang disemak. Pada masa yang sama, anda juga boleh dengan mudah melaksanakan operasi DOM lain menggunakan jQuery, seperti menambah, memadam, mengubah suai dan menyemak.

Selain itu, perlu diingatkan bahawa apabila menggunakan jQuery, anda perlu memberi perhatian kepada prestasi kod. Jika terdapat terlalu banyak elemen pada halaman, ia boleh menjejaskan kelajuan pemuatan halaman dan pengalaman pengguna. Oleh itu, kod harus diperkemaskan sebanyak mungkin untuk mengelakkan pengiraan berulang dan operasi yang tidak bermakna.

Atas ialah kandungan terperinci jquery secara dinamik memperoleh nilai sama ada kotak semak dipilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!