快捷導(dǎo)航

js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法

更新時(shí)間：2016年01月05日 14:44:39 作者：admin

這篇文章主要介紹了js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法,結(jié)合實(shí)例較為詳細(xì)的分析了JavaScript與jQuery針對checkbox復(fù)選框全選與反選的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法。分享給大家供大家參考，具體如下：

先來看看JavaScript實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法。這應(yīng)該是一個(gè)比較實(shí)用的前端技巧吧，很多時(shí)候我們都需要點(diǎn)擊一個(gè)checkbox，然后將所有的復(fù)選框自動(dòng)全部選中，比如新浪郵箱中，一些CMS系統(tǒng)的后臺中，使用本JS效果后，會(huì)大大增強(qiáng)了操作體驗(yàn)，那么究竟是如何實(shí)現(xiàn)這一功能的呢？別著急，跟我一步一步實(shí)現(xiàn)。

我們先把那些帶復(fù)選框的列表弄好，還沒加全選、全不選時(shí)候的狀態(tài)，大概是這樣的：

<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>

然后我們在列表的旁邊放一個(gè)控制checkbox的Checkbox：

全選：

復(fù)制代碼代碼如下:

下面是定義點(diǎn)擊全選的checkBox后所要執(zhí)行的JS代碼，用JS遍歷所有checkbox，并改變checkbox的狀態(tài)：

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

下面還有一種實(shí)現(xiàn)JS全選、反選的功能，直接帖代碼了，自己整理吧。

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

<!--放一個(gè)控制全選的按鈕-->
全選<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>

兩種方法任選一吧，都比較容易。

下面再來介紹一下jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法。雖然使用JavaScript很簡單就可以實(shí)現(xiàn)，但是代碼就非常的麻煩了。

下面我來給各位朋友介紹介紹使用jQuery具體的操作方法。

jQuery.attr 獲取/設(shè)置對象的屬性值,如：

$("input[name='chk_list']").attr("checked"); //讀取所有name為'chk_list'對象的狀態(tài)（是否選中）
$("input[name='chk_list']").attr("checked",true); //設(shè)置所有name為'chk_list'對象的checked為true

再如：

$("#img_1").attr("src","test.jpg"); //設(shè)置ID為img_1的<img>src的值為'test.jpg'
$("#img_1").attr("src"); //讀取ID為img_1的<img>src值

例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(){
 //是否選擇進(jìn)行判斷
 $(".btn").click(function(){
  if ($("input:checkbox:checked").length == 0)
  {
  alert('你未選擇愛好');
  }
 });
 //進(jìn)行反選
  $(".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>

例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>

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: