Contoh demonstrasi mudah tentang cara menggunakan kotak semak dalam jquery_jquery

Kongsi dengan anda sekeping kod berdasarkan jQuery yang melaksanakan fungsi memilih semua, menyongsangkan dan menyahpilih senarai kotak pilihan Ia sesuai untuk senario di mana operasi kelompok diperlukan selepas berbilang pilihan pada halaman web (seperti pemadaman kelompok. , dsb.). Artikel ini menggabungkan contoh dengan kod ringkas dan pada asasnya merangkumi semua aspek operasi pemilihan pilihan Saya harap ia dapat membantu peminat pembangunan bahagian hadapan yang memerlukan.

Memperkenalkan perpustakaan jquery

Bina HTML

Secara amnya, senarai yang dibaca daripada pangkalan data perlu dipilih secara berkelompok untuk pemadaman dan pengeditan Mari kita buat simulasi di bawah untuk mengetahui sama ada hendak memilih semua kotak pilihan atau tidak

<ul id="list"> 
 <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
 <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> 
 <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li> 
 <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
 <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
 <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll"> 
<input type="button" value="全不选" class="btn" id="unSelect"> 
<input type="button" value="反选" class="btn" id="reverse"> 
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

kod jQuery

1 Pilih semua atau tiada. Apabila kotak semak #semua di sebelah butang pilih semua #pilihSemua ditandakan, semua pilihan dalam senarai akan dipilih, semua pilihan dalam senarai tidak ditandakan.

$("#all").click(function(){ 
 if(this.checked){ 
  $("#list :checkbox").attr("checked", true); 
 }else{ 
  $("#list :checkbox").attr("checked", false); 
 } 
});

2. Apabila anda mengklik butang Pilih Semua #pilihSemua atau tandakan kotak semak #semua di sebelah butang Pilih Semua, semua pilihan dalam senarai akan dipilih, termasuk kotak pilihan di sebelah Pilih Semua.

$("#selectAll").click(function () { 
 $("#list :checkbox,#all").attr("checked", true); 
});

3. Pilih tiada. Apabila anda mengklik butang #nyahPilih, semua pilihan dalam senarai tidak dipilih, termasuk #semua.

$("#unSelect").click(function () { 
 $("#list :checkbox,#all").attr("checked", false); 
});

4. Apabila anda mengklik butang pilihan terbalik #terbalik, semua pilihan yang dipilih dalam senarai akan menjadi tidak dipilih, dan semua pilihan yang tidak dipilih sudah tentu, anda juga harus memberi perhatian kepada status #semua.

$("#reverse").click(function () { 
 $("#list :checkbox").each(function () { 
  $(this).attr("checked", !$(this).attr("checked")); 
 }); 
 allchk(); 
});

Kod merentasi senarai pilihan, kemudian menukar atribut yang ditandakan, dan akhirnya memanggil fungsi allchk(), yang akan diperkenalkan kemudian.

5. Dapatkan semua nilai yang dipilih. Jika kita ingin berinteraksi dengan program latar belakang, kita mesti mendapatkan nilai item yang dipilih dalam senarai Kita melintasi tatasusunan, menyimpan nilai item yang dipilih dalam tatasusunan, dan akhirnya membentuk rentetan dipisahkan dengan koma (,). Pembangun boleh melakukan operasi yang sepadan dengan mendapatkan rentetan ini.

$("#getValue").click(function(){ 
 var valArr = new Array; 
 $("#list :checkbox[checked]").each(function(i){ 
  valArr[i] = $(this).val(); 
 }); 
 var vals = valArr.join(',');//转换为逗号隔开的字符串 
 alert(vals); 
});

Untuk menambah baik fungsi pilihan yang dipilih, apabila kita mengklik pilihan dalam senarai, jika item yang ditandakan memenuhi semua syarat yang dipilih, #semua juga akan dipilih dengan cara yang sama, jika semua item yang dipilih dipilih terlebih dahulu, Apabila pilihan dipilih, dan apabila pilihan dinyahtanda, #all juga akan menjadi tidak ditandakan dengan sewajarnya.

//设置全选复选框 
$("#list :checkbox").click(function(){ 
 allchk(); 
});

Fungsi allchk() digunakan untuk mengesan sama ada kotak semua pilih #semua harus dipilih atau dinyahpilih Sila lihat kod.

function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

Ringkasan

jQuery mengendalikan status kotak pilihan yang ditanda dan tidak ditanda Gunakan attr() untuk menetapkan nilai atribut "ditandakan" Benar tidak ditanda, salah tidak ditandakan keseluruhan proses Pilih keadaan kotak semak yang ditanda dan dapatkan nilai pilihan yang dipilih. Di bawah saya telah menyusun semua kod jQuery bersama-sama untuk rujukan anda.

$(function () { 
 //全选或全不选 
 $("#all").click(function(){ 
  if(this.checked){ 
   $("#list :checkbox").attr("checked", true); 
  }else{ 
   $("#list :checkbox").attr("checked", false); 
  } 
  }); 
 //全选 
 $("#selectAll").click(function () { 
   $("#list :checkbox,#all").attr("checked", true); 
 }); 
 //全不选 
 $("#unSelect").click(function () { 
   $("#list :checkbox,#all").attr("checked", false); 
 }); 
 //反选 
 $("#reverse").click(function () { 
   $("#list :checkbox").each(function () { 
    $(this).attr("checked", !$(this).attr("checked")); 
   }); 
   allchk(); 
 }); 
  
 //设置全选复选框 
 $("#list :checkbox").click(function(){ 
  allchk(); 
 }); 
 
 //获取选中选项的值 
 $("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
   valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(','); 
   alert(vals); 
 }); 
}); 
function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

Melalui artikel ini, saya harap anda akan mempunyai pemahaman umum tentang cara menggunakan kotak pilihan dalam jquery, dan kemudian menguasai penggunaan kotak semak dengan mahir melalui sejumlah besar contoh.