jQuery實(shí)現(xiàn)CheckBox全選、全不選功能
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery實(shí)現(xiàn)CheckBox全選、全不選</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(':checkbox').click(function(evt){ // 阻止冒泡 evt.stopPropagation(); }); //判斷是否全選 $("#checkAll").click(function() { $('input[name="subBox"]').prop("checked",this.checked); }); var $subBox = $("input[name='subBox']"); $subBox.click(function(){ //alert($subBox.length); //alert($("input['subBox']:checked").length); $("#checkAll").prop("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false); }); //用于檢查是否選中,選中的話提示值 $("#butt").click(function (){ //$('input[name="subBox"]').prop("checked",this.checked); var arrChk=$("input[name='subBox']:checked"); $(arrChk).each(function(){ //each() 遍歷函數(shù) alert(this.value); }); if(arrChk.length==0){ alert("沒(méi)有選中") } }); }); </script> </head> <body> <div> <input id="checkAll" type="checkbox" />全選 <input name="subBox" type="checkbox" value="1" />選項(xiàng)1 <input name="subBox" type="checkbox" value="2"/>選項(xiàng)2 <input name="subBox" type="checkbox" value="3"/>選項(xiàng)3 <input name="subBox" type="checkbox" value="4"/>選項(xiàng)4 <input type="button" id="butt" value="檢查是否選中"/> </div> </body> </html>
jQuery版本問(wèn)題
原本操作屬性用的是 $("XXX").attr("attrName");
而jQuery的版本用的是2.1.1,這就是存在一個(gè)兼容性和穩(wěn)定性問(wèn)題。
jQuery API明確說(shuō)明,1.6+的jQuery要用prop,尤其是checkBox的checked的屬性的判斷,
即 使用代碼如下:
$("input[name='checkbox']").prop("checked"); $("input[name='checkbox']").prop("disabled", false); $("input[name='checkbox']").prop("checked", true);
于是乎將attr改為prop,問(wèn)題得解。
相關(guān)閱讀:
jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼
jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)CheckBox全選、全不選功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery中checkbox全選失效的解決方法
- jquery 實(shí)現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- jquery數(shù)組之存放checkbox全選值示例代碼
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- jquery checkbox全選反選效果代碼
- jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
相關(guān)文章
jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)?lái)一篇jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的,只能供大家選擇,今天小編給大家分享基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載,需要的朋友參考下2016-02-02jquery+css實(shí)現(xiàn)Tab欄切換的代碼實(shí)例
這篇文章主要介紹了jquery css實(shí)現(xiàn)Tab欄切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05jquery操作select取值賦值與設(shè)置選中實(shí)例
下面小編就為大家?guī)?lái)一篇jquery操作select取值賦值與設(shè)置選中實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jQuery中DOM樹(shù)操作之使用反向插入方法實(shí)例分析
這篇文章主要介紹了jQuery中DOM樹(shù)操作之使用反向插入方法,實(shí)例分析了反向插入方法與插入方法回調(diào)的使用技巧,需要的朋友可以參考下2015-01-01jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法,涉及jQuery針對(duì)頁(yè)面元素的循環(huán)遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
本文主要分享了jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法,結(jié)合實(shí)例形式分析了動(dòng)態(tài)添加元素?zé)o法綁定事件的原因與相關(guān)解決方法,需要的朋友可以參考下2018-01-01