2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.      <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
  8.     <title>Document</title>
  9.     <script type="text/javascript">
  10.     $(function(){
  11.       $('#all').on('click',function(){
  12. $('input:lt(4)').prop('checked',true);
  13. //lt，gt是不包括临界的，
  14.       });
  15.          $('input:eq(5)').on('click',function(){
  16. $('input:lt(4)').prop('checked',false);
  17.       });
  18.  
  19.       $('#btn').click(function(){
  20. var $att=$('input:checkbox').prop('checked');
  21. // var $att=$('input:checkbox').attr('checked' 总是弹出undefined
  22. // alert($att);
  23. if($att==false){
  24.     // $('input[checked=true]').attr('checked',false);
  25.     $('input:checkbox').prop('checked',true);
  26. }
  27. else{
  28. $('input:checkbox').prop('checked',false);
  29. }
  30. // $('[name=hobby]:checkbox').each(function(){
  31. //     this.checked=!this.checked;
  32. //     //赋相反的值。
  33. // })
  34.  });
  35.           });
  36.  
  37.     </script>
  38. </head>
  39. <body>
  40.     <form action="">
  41.     <label for='hobby'>你爱好的运动是</label><br>
  42.     <input type="checkbox" name="hobby" >足球
  43.     <input type="checkbox" name="hobby" >篮球
  44.     <input type="checkbox" name="hobby" >羽毛球
  45.     <input type="checkbox" name="hobby" >乒乓球<br>
  46.     <input type="button" value="全选" id='all'>
  47.     <input type="button" value="全不选">
  48.     <input type="button" value="反选" id='btn'>
  49. <!--     <input type="button" value="提交"> -->
  50.     </form>
  51. </body>
  52. </html>
  53. <!-- 问题关键是attr获取不到checked的属性值，总是弹出undefined ，后来发现要用prop来获取值
  54. 前面的全选和反选用attr来设置checked值时候只能够设置一次， 二用prop可以设置多次
  55.  -->
  1. 1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase
  2. 复制代码 代码如下:
  3.  
  4. <input type="checkbox" id="selectAll" onclick="checkAll()">全选
  5. function checkAll()
  6. {
  7. var checkedOfAll=$("#selectAll").prop("checked");
  8. alert(checkedOfAll);
  9. $("input[name='procheck']").prop("checked", checkedOfAll);
  10. }
  11.  
  12. 2.如果使用attr方法获取时，如果当前input中初始化未定义checked属性，则不管当前是否选中，$("#selectAll").attr("checked")都会返回undefined；
  13. 复制代码 代码如下:
  14.  
  15. <input type="checkbox" id="selectAll" onclick="checkAll()" >全选
  16.  
  17. 如果当前input中初始化已定义checked属性，则不管是否选中，$("#selectAll").attr("checked")都会返回checked.
  18. 复制代码 代码如下:
  19.  
  20. <input type="checkbox" id="selectAll" onclick="checkAll()" checked>全选
  21. function checkAll()
  22. {
  23. var checkedOfAll=$("#selectAll").attr("checked");
  24. alert(checkedOfAll);
  25. $("input[name='procheck']").attr("checked", checkedOfAll);
  26. }
  27.  
  28. 总结，如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr.

jquery的attr获取表单checked 布尔值问题的更多相关文章

  1. javascript获取表单的各项值

    何谓表单? 表单是html页面中负责数据采集功能的部件,它往往由三个部分组成: 表单标签:<form></form> 用于声明表单的范围,位于表单标签中的元素将被提交.属性有m ...

  2. jquery的attr禁用表单元素的方法

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

  3. 获取表单的初始值，模拟placeholder属性

    input和textarea有一个默认属性defaultValue,即初始值. 即使在页面操作修改了input和textarea的内容,获取到的defaultValue依然是初始值.可通过该值模拟pl ...

  4. jquery easyui将form表单元素的值序列化成对象

    function serializeObject(form){ var o={}; $.each(form.serializeArray(),function(index){ if(o[this['n ...

  5. 使用js获取表单元素的值

    function getParams(formName) { var frmMain = document.getElementById(formName)?document.getElementBy ...

  6. ionic获取表单input的值的两种方法

    1.参数传递法 直接在input处使用 #定义参数的name值,注意在ts中参数的类型 html页面: <ion-input type="text" placeholder= ...

  7. JS获取表单元素的value

    <!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 ...

  8. JavaScript之控制表单元素的值

    表单元素.value 获取表单元素的值 表单元素.value='这是修改后的值' 修改表单元素的值 案例: (1)html <input type="text" id=&qu ...

  9. 用jQuery获取表单的值

    在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type=' ...

随机推荐

  1. Linux特殊权限设置以及使用

    Linux文件权限特殊权限(s-s-t) 什么是suid权限 SUID是可执行文件的特殊文件权限,使其他用户能够以文件所有者的有效权限运行文件. 代替执行权限的正常x代替用户的s(指示SUID )特权 ...

  2. robotframework悬浮菜单定位问题

      有些菜单是悬浮菜单,鼠标点上去下级元素才会显示.比如在第一个菜单中选择后会触发二级菜单的某事件,触发二级菜单又去点三级菜单.. 最开始就用click element去点击了,可是菜单会缩回去,就有 ...

  3. CSS：CSS Id 和 Class选择器

    ylbtech-CSS:CSS Id 和 Class选择器 1.返回顶部 1. CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置& ...

  4. HTTPS 加密机制

    目录 1. HTTPS 概述 2. 对称加密 3. 非对称加密 4. 非对称加密改良方案 5. 非对称加密 + 对称加密 6. 中间人攻击 7. 数字证书 8. 数字签名 9. HTTPS 工作原理 ...

  5. 19、Page Object 实例

    项目目录介绍: CalcuatorPage.java文件代码: package example; import io.appium.java_client.android.AndroidDriver; ...

  6. 1022 Digital Library (30 分)

    1022 Digital Library (30 分)   A Digital Library contains millions of books, stored according to thei ...

  7. 用mybatis进行模糊查询总是查不到结果！

    //IStudentDao.xml @Override public List<Student> selectStudentByName(String name) { SqlSession ...

  8. wordpress 上传图片时提示“无法建立目录wp-content/uploads/2019/03。有没有上级目录的写权限？”

    查一下网站目录下wp-content目录的权限, # ls -l drwxr-xr-x  5 nobody 65534  4096 Feb  3  2016 wp-content 修改wp-conte ...

  9. HTML5 Canvas知识点学习笔记

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyibin628/article/details/30108165 canvas ① 主要作 ...

  10. vue 在微信中设置动态标题

    1.安装插件 cnpm install vue-wechat-title --save 2.在main.js中引入 import VueWechatTitle from 'vue-wechat-tit ...