淺談jQuery中的checkbox問題
一開始的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>復選框</title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#all").click(function () { if (this.checked) { $("#list :checkbox").each(function () { $(this).attr("checked", true); //選擇器要有空格隔開 }) } else { $("#list :checkbox").each(function () { $(this).attr("checked", false); }) } }); }) </script> </head> <body> <ul id="list"> <li><label><input type="checkbox" value="1">廣東省 </label></li> <li><label><input type="checkbox" value="2">廣西省 </label></li> <li><label><input type="checkbox" value="3">河南省 </label></li> <li><label><input type="checkbox" value="4">福建省 </label></li> <li><label><input type="checkbox" value="5">湖南省 </label></li> <li><label><input type="checkbox" value="6">江西省 </label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全選" class="btn" id="selectAll"> <input type="button" value="全不選" class="btn" id="unSelect"> <input type="button" value="反選" class="btn" id="reverse"> <input type="button" value="獲得選中的所有值" class="btn" id="getValue"> </body> </html>
當使用帶有jQuery的方法attr()時,會有相應的問題存在,比如當你在點擊id=all的復選框前去點擊id=list下的復選框,這時當你再次點擊id=all的復選框時就會出現(xiàn)之前點擊的復選框沒有變化,但是查看元素時發(fā)現(xiàn)該復選框的checked值會發(fā)生相應的變化。我查了一下資料,問題出在如下:
原來是jQuery版本問題。因為這里用的是attr(),而jQuery的版本用的是3.1.0的,這就存在一個兼容性問題。
$("XXX").attr("attrName");而jQuery的版本用的是2.1.1,這就是存在一個兼容性和穩(wěn)定性問題。
jQuery API明確說明,1.6+的jQuery要用prop,尤其是checkBox的checked的屬性的判斷,
即使用代碼如下:
$(function() { $("#all").click(function () { if (this.checked) { $("#list :checkbox").each(function () { $(this).prop("checked", true); //選擇器要有空格隔開 }) } else { $("#list :checkbox").each(function () { $(this).prop("checked", false); }) } });
給出使用jQuery事先的全選和全不選:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>復選框</title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#all").click(function () { if (this.checked) { $("#list :checkbox").each(function () { $(this).prop("checked", true); //選擇器要有空格隔開 }) } else { $("#list :checkbox").each(function () { $(this).prop("checked", false); }) } }); //第二種 // $("#all").click(function(){ // if(this.checked){ // $("#list :checkbox").prop("checked", true); // }else{ // $("#list :checkbox").prop("checked", false); // } // }); //全選 $("#selectAll").click(function () { $("#list :checkbox,#all").prop("checked", true); }); //全不選 $("#unSelect").click(function () { $("#list :checkbox,#all").prop("checked", false); }); //反選 $("#reverse").click(function () { $("#list :checkbox").each(function () { // $(this).prop("checked", !$(this).prop("checked")); this.checked=!this.checked; }); if($('#list :checkbox:checked').length==$("#list :checkbox").length){ $("#all").prop("checked",true); } else{ $("#all").prop("checked",false); } }); //獲取選中的值 $("#getValue").click(function(){ var valArr = new Array(); $("#list :checkbox:checked").each(function(i){ //判斷被選中的 valArr[i] = $(this).val(); }) var vals = valArr.join(',');//轉換為逗號隔開的字符串 alert(vals); }); }) </script> </head> <body> <ul id="list"> <li><label><input type="checkbox" value="1.廣東省">廣東省 </label></li> <li><label><input type="checkbox" value="2.廣西省">廣西省 </label></li> <li><label><input type="checkbox" value="3.河南省">河南省 </label></li> <li><label><input type="checkbox" value="4.福建省">福建省 </label></li> <li><label><input type="checkbox" value="5.湖南省">湖南省 </label></li> <li><label><input type="checkbox" value="6.江西省">江西省 </label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全選" class="btn" id="selectAll"> <input type="button" value="全不選" class="btn" id="unSelect"> <input type="button" value="反選" class="btn" id="reverse"> <input type="button" value="獲得選中的所有值" class="btn" id="getValue"> </body> </html>
使用原聲JS實現(xiàn)全選和全不選
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i<len; i++) { if((el[i].type=="checkbox") && (el[i].name==name)) { el[i].checked = true; } } } function clearAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i<len; i++) { if((el[i].type=="checkbox") && (el[i].name==name)) { el[i].checked = false; } } } </script> <input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全選開關 <input type="checkbox" name="test" value="a" /> a <input type="checkbox" name="test" value="b" /> b <input type="checkbox" name="test" value="c" /> c <input type="checkbox" name="test" value="d" /> d <input type="checkbox" name="test" value="e" /> e <input type="checkbox" name="test" value="f" /> f <input type="checkbox" name="test" value="g" /> g <br> <input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 數(shù)字全選開關 <input type="checkbox" name="num" value="1" /> 1 <input type="checkbox" name="num" value="2" /> 2 <input type="checkbox" name="num" value="3" /> 3 <br><br> <input type="button" value="選擇所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空選中的字母" onclick="clearAll('test')" /> <br><br> <input type="button" value="選擇所有的數(shù)字" onclick="checkAll('num')" /> <input type="button" value="清空選中的數(shù)字" onclick="clearAll('num')" /> </body> </html>
最后插入attr()與prop()的區(qū)別:
jquery1.6中新加了一個方法prop(),官方解釋只有一句話:獲取在匹配的元素集中的第一個元素的屬性值。
大家都知道有的瀏覽器只要寫disabled,checked就可以了,而有的要寫成disabled = "disabled",checked="checked",比如用attr("checked")獲取checkbox的checked屬性時選中的時候可以取到值,值為"checked"但沒選中獲取值就是undefined。
jq提供新的方法“prop”來獲取這些屬性,就是來解決這個問題的,以前我們使用attr獲取checked屬性時返回"checked"和"",現(xiàn)在使用prop方法獲取屬性則統(tǒng)一返回true和false。
那么,什么時候使用attr(),什么時候使用prop()?
1.添加屬性名稱該屬性就會生效應該使用prop();
2.是有true,false兩個屬性使用prop();
3.其他則使用attr();
項目中jquery升級的時候大家要注意這點!
以下是官方建議attr(),prop()的使用:
Attribute/Property | .attr() | .prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width()) | √ |
以上這篇淺談jQuery中的checkbox問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- 淺談jquery設置和獲得checkbox選中的問題
- jquery checkbox無法用attr()二次勾選問題的解決方法
- 淺析jquery與checkbox的checked屬性的問題
- jquery checkbox 勾選的bug問題解決方案與分析
- 解決jquery操作checkbox火狐下第二次無法勾選問題
- Jquery 獲取checkbox的checked問題
- jQuery1.9.1針對checkbox的調整方法(prop)
- JQuery觸發(fā)radio或checkbox的change事件
- jQuery判斷checkbox是否選中的3種方法
- jquery判斷checkbox(復選框)是否被選中的代碼
- jQuery checkbox選中問題之prop與attr注意點分析
相關文章
使用FlexiGrid實現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實現(xiàn)Extjs表格效果方法,非常的實用,這里推薦給有相同需求的小伙伴2014-12-12Easyui筆記2:實現(xiàn)datagrid多行刪除的示例代碼
本篇文章主要介紹了Easyui筆記2:實現(xiàn)datagrid多行刪除,詳細介紹了完成一個多行勾選并刪除的功能。有興趣的可以了解一下。2017-01-01用jquery實現(xiàn)學校的校歷(asp.net+jquery ui 1.72)
學校日歷有以下幾個特點:1顯示本周是本學期的第幾周;2顯示今日事件;3特殊顯示有事件的日期,點擊該日期顯示本日事件。2010-01-01jquery ztree實現(xiàn)下拉樹形框使用到了json數(shù)據
項目需要用到樹形下拉框,采用了zTree來實現(xiàn),因為代碼的移植性比較高,下面是實現(xiàn)的代碼2014-05-05