溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery全選/取消全選(反選)/單選操作

發(fā)布時間：2020-07-11 10:36:56 來源：網(wǎng)絡(luò) 閱讀：1593 作者：ze1911 欄目：web開發(fā)

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

jquery版本：2.0

先看看HTML代碼，很簡單的操作框

</head>
<body>
   <div>
       <input id="checkAll" type="checkbox" />全選
       <input name="subBox" type="checkbox" />項1
       <input name="subBox" type="checkbox" />項2
       <input name="subBox" type="checkbox" />項3
       <input name="subBox" type="checkbox" />項4
   </div>
</body>
</html>

引入jquery庫

<scriptsrc="/static/js/jquery-2.0.3.min.js"></script>

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

<scripttype="text/javascript">
$(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);
         });
});
</script>

這段代碼在第一次正?？梢匀x和全不選，但是后面就沒有效果，因為$('input[name=" subBox "]'). attr ("checked",this.checked)的值是undefined，因為在源代碼里面沒有這個屬性。

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

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

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

概述

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

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

參數(shù)

name

屬性名稱

properties

作為屬性的“名/值對”對象

key,value

屬性名稱，屬性值

key,function(index, attr)

1:屬性名稱。

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

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

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

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

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

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

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

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

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

3.其他則使用attr();


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

<scripttype="text/javascript">
$(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);
         });
});
</script>

這樣修改以后，就正常了

 


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手