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

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

WBOY

Lepaskan： 2016-05-16 15:21:39

asal

1241 orang telah melayarinya

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>

Salin selepas log masuk

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

Pilih semua:

Salin kod Kod adalah seperti berikut:

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>

Salin selepas log masuk

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>

Salin selepas log masuk

<!--放一个控制全选的按钮-->
全选<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>

Salin selepas log masuk

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

Salin selepas log masuk

Contoh lain:

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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