一开始的代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>复选框</title>
  6. <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function() {
  9. $("#all").click(function () {
  10. if (this.checked) {
  11. $("#list :checkbox").each(function () {
  12. $(this).attr("checked", true); //选择器要有空格隔开
  13. })
  14. } else {
  15. $("#list :checkbox").each(function () {
  16. $(this).attr("checked", false);
  17. })
  18. }
  19.  
  20. });
  21. })
  22. </script>
  23. </head>
  24. <body>
  25. <ul id="list">
  26. <li><label><input type="checkbox" value="1">广东省 </label></li>
  27. <li><label><input type="checkbox" value="2">广西省 </label></li>
  28. <li><label><input type="checkbox" value="3">河南省 </label></li>
  29. <li><label><input type="checkbox" value="4">福建省 </label></li>
  30. <li><label><input type="checkbox" value="5">湖南省 </label></li>
  31. <li><label><input type="checkbox" value="6">江西省 </label></li>
  32. </ul>
  33. <input type="checkbox" id="all">
  34. <input type="button" value="全选" class="btn" id="selectAll">
  35. <input type="button" value="全不选" class="btn" id="unSelect">
  36. <input type="button" value="反选" class="btn" id="reverse">
  37. <input type="button" value="获得选中的所有值" class="btn" id="getValue">
  38. </body>
  39. </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的属性的判断,即使用代码如下:

  1. $(function() {
  2. $("#all").click(function () {
  3. if (this.checked) {
  4. $("#list :checkbox").each(function () {
  5. $(this).prop("checked", true); //选择器要有空格隔开
  6. })
  7. } else {
  8. $("#list :checkbox").each(function () {
  9. $(this).prop("checked", false);
  10. })
  11. }
  12.  
  13. });

给出使用jQuery事先的全选和全不选:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>复选框</title>
  6. <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function() {
  9. $("#all").click(function () {
  10. if (this.checked) {
  11. $("#list :checkbox").each(function () {
  12. $(this).prop("checked", true); //选择器要有空格隔开
  13. })
  14. } else {
  15. $("#list :checkbox").each(function () {
  16. $(this).prop("checked", false);
  17. })
  18. }
  19. });
  20. //第二种
  21. // $("#all").click(function(){
  22. // if(this.checked){
  23. // $("#list :checkbox").prop("checked", true);
  24. // }else{
  25. // $("#list :checkbox").prop("checked", false);
  26. // }
  27. // });
  28.  
  29. //全选
  30. $("#selectAll").click(function () {
  31. $("#list :checkbox,#all").prop("checked", true);
  32. });
  33.  
  34. //全不选
  35. $("#unSelect").click(function () {
  36. $("#list :checkbox,#all").prop("checked", false);
  37. });
  38.  
  39. //反选
  40. $("#reverse").click(function () {
  41. $("#list :checkbox").each(function () {
  42. // $(this).prop("checked", !$(this).prop("checked"));
  43. this.checked=!this.checked;
  44. });
  45.  
  46. if($('#list :checkbox:checked').length==$("#list :checkbox").length){
  47. $("#all").prop("checked",true);
  48. }
  49. else{
  50. $("#all").prop("checked",false);
  51. }
  52. });
  53.  
  54. //获取选中的值
  55. $("#getValue").click(function(){
  56. var valArr = new Array();
  57. $("#list :checkbox:checked").each(function(i){ //判断被选中的
  58. valArr[i] = $(this).val();
  59. })
  60. var vals = valArr.join(',');//转换为逗号隔开的字符串
  61. alert(vals);
  62. });
  63. })
  64. </script>
  65. </head>
  66. <body>
  67. <ul id="list">
  68. <li><label><input type="checkbox" value="1.广东省">广东省 </label></li>
  69. <li><label><input type="checkbox" value="2.广西省">广西省 </label></li>
  70. <li><label><input type="checkbox" value="3.河南省">河南省 </label></li>
  71. <li><label><input type="checkbox" value="4.福建省">福建省 </label></li>
  72. <li><label><input type="checkbox" value="5.湖南省">湖南省 </label></li>
  73. <li><label><input type="checkbox" value="6.江西省">江西省 </label></li>
  74. </ul>
  75. <input type="checkbox" id="all">
  76. <input type="button" value="全选" class="btn" id="selectAll">
  77. <input type="button" value="全不选" class="btn" id="unSelect">
  78. <input type="button" value="反选" class="btn" id="reverse">
  79. <input type="button" value="获得选中的所有值" class="btn" id="getValue">
  80. </body>
  81. </html>

使用原声JS实现全选和全不选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. function checkAll(name) {
  10. var el = document.getElementsByTagName('input');
  11. var len = el.length;
  12. for(var i=0; i<len; i++) {
  13. if((el[i].type=="checkbox") && (el[i].name==name)) {
  14. el[i].checked = true;
  15. }
  16. }
  17. }
  18. function clearAll(name) {
  19. var el = document.getElementsByTagName('input');
  20. var len = el.length;
  21. for(var i=0; i<len; i++) {
  22. if((el[i].type=="checkbox") && (el[i].name==name)) {
  23. el[i].checked = false;
  24. }
  25. }
  26. }
  27. </script>
  28. <input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
  29. <input type="checkbox" name="test" value="a" /> a
  30. <input type="checkbox" name="test" value="b" /> b
  31. <input type="checkbox" name="test" value="c" /> c
  32. <input type="checkbox" name="test" value="d" /> d
  33. <input type="checkbox" name="test" value="e" /> e
  34. <input type="checkbox" name="test" value="f" /> f
  35. <input type="checkbox" name="test" value="g" /> g
  36. <br>
  37. <input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
  38. <input type="checkbox" name="num" value="2" /> 2
  39. <input type="checkbox" name="num" value="3" /> 3
  40. <br><br>
  41. <input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br><br>
  42. <input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />
  43. </body>
  44. </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问题的更多相关文章

  1. jquery中选择checkbox拼接成字符串,然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

  2. js jquery中判断checkbox是否被选中的方法

    在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input ...

  3. Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox. Radiobutton . DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的 ...

  4. Jquery中的checkbox 及radio的问题

    在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" cl ...

  5. Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JQuery中判断checkbox是否选中与禁用鼠标右键

    if ($("#wds_checkbox").attr("checked")) { flag = ; } else { flag = ; } 禁用鼠标右键 // ...

  7. Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值

    1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $ ...

  8. 使用jQuery获取radio/checkbox组的值的代码收集

    <!-- $("document").ready(function(){ $("#btn1").click(function(){ $("[na ...

  9. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...

随机推荐

  1. 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux

    因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...

  2. Tomcat 的 ErrorPage 实现原理分析

    使用Tomcat,一定见到过404,500的时候,见到过Tomcat提供的错误页面,例如请求的资源找不到的时候,响应状态码为404,这个时候的错误页面是这样的: 这些错误页面是 如何生成及定位展示的  ...

  3. js001-JavaScript简介

    js001-JavaScript简介 1.             JavaScript实现 JavaScript 的三个重要组成部分如下图   1.1.ECMAScript 1.1.1    版本 ...

  4. List<T> 转换 DataTable

    public class List2DataTable     { public static string GetClassName(Type type) {             if (typ ...

  5. vs------连接MySQL

    转载: http://jingyan.baidu.com/article/8ebacdf023953f49f65cd589.html

  6. phpcms v9 数据库操作函数

    表明默认当前load_model('xxxx')模块所在表名xxxx 若要指定表名  则:操作在mysql.class.php中$this->db->select(...) 1.查询  $ ...

  7. Sort 整理

    文章.图片参考:http://www.jianshu.com/p/1b4068ccd505?hmsr=toutiao.io&utm_medium=toutiao.io&utm_sour ...

  8. Unable to find vcvarsall.bat的解决办法

    明年绝对买MAC电脑,这一两天安装paramiko,真是操碎了心. 安装paramiko时报error: Unable to find vcvarsall.bat这种错误,网上找了各种方法啊,解决的办 ...

  9. wordpress后台404页面

    就在刚刚,boss需要看公司网站后台,网站是用wordpress搭的,发现全是404,蛋疼,于是google,下面是解决办法: location / { if (-f $request_filenam ...

  10. 一段发工资的shell代码

    人事发工资条之前是一个个截图发到我们的邮箱里,看人事妹纸是一个善良而又美丽的姑凉,于是乎写了一段shell代码实现批量发短信至各个手机号.不多说了,上代码,其实很简单,我都不好意思上传,还是记录下吧, ...