一開始的代碼：
<!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的復選框時就會出現之前點擊的復選框沒有變化，但是查看元素時發現該復選框的checked值會發生相應的變化。我查了一下資料，問題出在如下：
原來是jQuery版本問題。因為這里用的是attr(),而jQuery的版本用的是3.1.0的，這就存在一個兼容性問題。
$("XXX").attr("attrName");而jQuery的版本用的是2.1.1，這就是存在一個兼容性和穩定性問題。
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實現全選和全不選
<!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'); }" /> 數字全選開關 <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="選擇所有的數字" onclick="checkAll('num')" /> <input type="button" value="清空選中的數字" onclick="clearAll('num')" /></body></html>最后插入attr()與prop()的區別：
jquery1.6中新加了一個方法prop()，官方解釋只有一句話:獲取在匹配的元素集中的第一個元素的屬性值。
大家都知道有的瀏覽器只要寫disabled，checked就可以了，而有的要寫成disabled = "disabled"，checked="checked"，比如用attr("checked")獲取checkbox的checked屬性時選中的時候可以取到值,值為"checked"但沒選中獲取值就是undefined。
jq提供新的方法“prop”來獲取這些屬性，就是來解決這個問題的，以前我們使用attr獲取checked屬性時返回"checked"和"",現在使用prop方法獲取屬性則統一返回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問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
