Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan semua/nyahpilih semua kotak semak menggunakan kemahiran js dan jQuery_javascript

Bagaimana untuk melaksanakan semua/nyahpilih semua kotak semak menggunakan kemahiran js dan jQuery_javascript

WBOYasal: 2016-05-16 15:21:391188semak imbas

Contoh dalam artikel ini menerangkan kaedah memilih/menyahpilih semua kotak pilihan menggunakan js dan jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mari kita lihat dahulu cara menggunakan JavaScript untuk memilih/nyahpilih semua kotak pilihan. Ini sepatutnya menjadi teknik bahagian hadapan yang lebih praktikal Banyak kali kita perlu mengklik pada kotak semak dan kemudian secara automatik memilih semua kotak semak Sebagai contoh, dalam Peti Mel Sina atau di latar belakang beberapa sistem CMS, selepas menggunakan kesan JS ini pengalaman pengendalian amat dipertingkatkan, jadi bagaimanakah fungsi ini dilaksanakan? Jangan risau, ikuti saya langkah demi langkah untuk mencapainya.

Mari selesaikan senarai dengan kotak semak dahulu Sebelum memilih atau menyahpilih semua, keadaan akan kelihatan seperti ini:

<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>

Kemudian kami meletakkan Kotak Semak mengawal kotak pilihan di sebelah senarai:

Pilih semua:

Salin kod Kod adalah seperti berikut:

8a52ada8da6e280589c1da680e52b284

Berikut ialah kod JS yang ditakrifkan untuk dilaksanakan selepas mengklik Kotak semak yang dipilih semua Gunakan JS untuk melintasi semua kotak pilihan dan menukar status kotak pilihan:

<script language="javascript">
 function sel(a){
 o=document.getElementsByName(a)
 for(i=0;i<o.length;i++)
 o[i].checked=event.srcElement.checked
 }
</script>

Terdapat juga fungsi untuk melaksanakan pemilihan JS dan pilihan terbalik di bawah. Hanya siarkan kod dan selesaikan sendiri.

<input type=checkbox name=m>
<input type=checkbox name=m>
<input type=checkbox name=m>

<!--放一个控制全选的按钮-->
全选<input type="checkbox" value="1" onclick="mm(this)">
<script language=javascript>
<!--JS部分-->
function mm(o)
{
  var a = document.getElementsByName("m");
  for (var i=0;i<a.length;i++){
    a[i].checked = o.checked;
  }
}
</script>

Pilih salah satu daripada dua kaedah, kedua-duanya lebih mudah.

Sekarang mari perkenalkan kaedah jQuery untuk memilih/nyahpilih semua kotak pilihan. Walaupun ia mudah untuk dilaksanakan menggunakan JavaScript, kod tersebut sangat menyusahkan.

Sekarang izinkan saya memperkenalkan kepada anda kaedah operasi khusus menggunakan jQuery.

jQuery.attr Dapatkan/tetapkan nilai atribut objek, seperti:

$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

Contoh lain:

$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

Contoh 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script>
 $(document).ready(function(){
 //是否选择进行判断
 $(".btn").click(function(){
  if ($("input:checkbox:checked").length == 0)
  {
  alert('你未选择爱好');
  }
 });
 //进行反选
  $(".btn1").click(function(){
  $("input[type=checkbox]").each(function(){
  if ($(this).attr("checked"))
  {
   $(this).attr("checked",false);
  }else{
   $(this).attr("checked",true);
  }
  });
  });
  });
 </script>
 </head>
<body>
爱好：
<input type="checkbox" name="fav[]" value="read">阅读
<input type="checkbox" name="fav[]" value="music">音乐
<input type="checkbox" name="fav[]" value="sport">体育<br />
<input type="button" name="btn" class="btn" value="提交">
<input type="button" name="btn1" class="btn1" value="反选">
</body>
</html>

Contoh 2:

<script src="jquery-1.3.2.min.js"></script>
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2″ />2<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_3″ />3<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_4″ />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/>全选/取消全选
<script type="text/javascript">
<!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
});
} else { // 取消全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
}
});
});
// -->
</script>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript melaksanakan kemahiran switching_javascript tab mudahArtikel seterusnya：JavaScript melaksanakan kemahiran switching_javascript tab mudah

Artikel berkaitan

Lihat lagi