使用jQuery實(shí)現(xiàn)一組checkbox全選/取消全選，代碼很簡(jiǎn)潔.

興山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

jquery版本：2.0

先看看HTML代碼，很簡(jiǎn)單的操作框

   

       全選
       項(xiàng)1
       項(xiàng)2
       項(xiàng)3
       項(xiàng)4
   

引入jquery庫(kù)

對(duì)于checkbox的選擇，實(shí)際上就是添加了一個(gè)屬性：checked，不管value有沒(méi)有值，都是選中狀態(tài)，在程序里面，如果checked值選中，就是true，不存在就是false。

$(function() {
  $("#checkAll").click(function() {
                   $('input[name="subBox "]'). attr ("checked",this.checked);
         });
         var$sub = $("input[name=' subBox ']");
         $sub.click(function(){
                   $("#checkAll").attr("checked",$sub.length==$("input[name='subBox']:checked").length ? true : false);
         });
});

這段代碼在第一次正?？梢匀x和全不選，但是后面就沒(méi)有效果，因?yàn)?('input[name=" subBox "]'). attr ("checked",this.checked)的值是undefined，因?yàn)樵谠创a里面沒(méi)有這個(gè)屬性。

查看jquery的api手冊(cè)，發(fā)現(xiàn)了一個(gè)prop函數(shù)：

—————————-以下函數(shù)說(shuō)明應(yīng)用自jquery官方api———————————-

prop(name|properties|key,value|fn)

概述

獲取在匹配的元素集中的第一個(gè)元素的屬性值。

隨著一些內(nèi)置屬性的DOM元素或window對(duì)象，如果試圖將刪除該屬性，瀏覽器可能會(huì)產(chǎn)生錯(cuò)誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯(cuò)誤

參數(shù)

name

屬性名稱(chēng)

properties

作為屬性的“名/值對(duì)”對(duì)象

key,value

屬性名稱(chēng)，屬性值

key,function(index, attr)

1:屬性名稱(chēng)。

2:返回屬性值的函數(shù),第一個(gè)參數(shù)為當(dāng)前元素的索引值，第二個(gè)參數(shù)為原先的屬性值。

——————————————以上函數(shù)說(shuō)明應(yīng)用自jquery官方api————————————–

prop()獲取匹配的元素的屬性值。

這個(gè)方法是jquery1.6以后出來(lái)的，用來(lái)區(qū)別之前的.attr()方法.

區(qū)別最大的一點(diǎn)就是：布爾型的屬性，1.6以后都是用.prop()方法就好了。

這個(gè)布爾型的屬性，再解釋一下，是屬性值只有true|false的屬性。

還有種情況就是只添加屬性名，不需要寫(xiě)屬性值的就可以生效的也同樣使用.prop()方法。比如：checked、disable這樣的，其實(shí)它們說(shuō)到底還是屬于布爾型的屬性。

1.添加屬性名稱(chēng)該屬性就會(huì)生效應(yīng)該使用prop();

2.是有true,false兩個(gè)屬性使用prop();

3.其他則使用attr();

上面的代碼將attr替換為prop：

$(function() {
  $("#checkAll").click(function() {
                   $('input[name="subBox "]').prop("checked",this.checked);
         });
         var$sub = $("input[name=' subBox ']");
         $sub.click(function(){
                   $("#checkAll").prop("checked",$sub.length== $("input[name=' subBox ']:checked").length ? true : false);
         });
});

這樣修改以后，就正常了