<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

     <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

    <title>Document</title>

    <script type="text/javascript">

    $(function(){

      $('#all').on('click',function(){

$('input:lt(4)').prop('checked',true);

//lt，gt是不包括临界的，

      });

         $('input:eq(5)').on('click',function(){

$('input:lt(4)').prop('checked',false);

      });

      $('#btn').click(function(){

var $att=$('input:checkbox').prop('checked');

// var $att=$('input:checkbox').attr('checked' 总是弹出undefined

// alert($att);

if($att==false){

    // $('input[checked=true]').attr('checked',false);

    $('input:checkbox').prop('checked',true);

}

else{

$('input:checkbox').prop('checked',false);

}

// $('[name=hobby]:checkbox').each(function(){

//     this.checked=!this.checked;

//     //赋相反的值。

// })

 });

          });

    </script>

</head>

<body>

    <form action="">

    <label for='hobby'>你爱好的运动是</label><br>

    <input type="checkbox" name="hobby" >足球

    <input type="checkbox" name="hobby" >篮球

    <input type="checkbox" name="hobby" >羽毛球

    <input type="checkbox" name="hobby" >乒乓球<br>

    <input type="button" value="全选" id='all'>

    <input type="button" value="全不选">

    <input type="button" value="反选" id='btn'>

<!--     <input type="button" value="提交"> -->

    </form>

</body>

</html>

<!-- 问题关键是attr获取不到checked的属性值，总是弹出undefined ，后来发现要用prop来获取值

前面的全选和反选用attr来设置checked值时候只能够设置一次， 二用prop可以设置多次

 -->
1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase

复制代码 代码如下:

<input type="checkbox" id="selectAll" onclick="checkAll()">全选

function checkAll()

{

var checkedOfAll=$("#selectAll").prop("checked");

alert(checkedOfAll);

$("input[name='procheck']").prop("checked", checkedOfAll);

}

2.如果使用attr方法获取时，如果当前input中初始化未定义checked属性，则不管当前是否选中，$("#selectAll").attr("checked")都会返回undefined；

复制代码 代码如下:

<input type="checkbox" id="selectAll" onclick="checkAll()" >全选

如果当前input中初始化已定义checked属性，则不管是否选中，$("#selectAll").attr("checked")都会返回checked.

复制代码 代码如下:

<input type="checkbox" id="selectAll" onclick="checkAll()" checked>全选

function checkAll()

{

var checkedOfAll=$("#selectAll").attr("checked");

alert(checkedOfAll);

$("input[name='procheck']").attr("checked", checkedOfAll);

}

总结，如果使用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. Openstack组件实现原理 — Glance架构(V1/V2)

    目录 目录 Glance 安装列表 Glance Image service Image service 的组件 Glance-Api Glance-Registry Glance-db Image ...

  2. JVM 源码分析之 javaagent 原理完全解读

    转载:https://infoq.cn/article/javaagent-illustrated 本文重点讲述 javaagent 的具体实现,因为它面向的是我们 Java 程序员,而且 agent ...

  3. hexo next主题深度优化(一)，加入pjax功能。

    文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...

  4. 替换war包中的文件

    原文:https://blog.csdn.net/wuawua1/article/details/53906700 1.如果要替换的文件直接在war包的根目录(一级目录)下,直接使用jar uvf命令 ...

  5. 4. Jmeter主界面的介绍

    上篇文章我们已经介绍过如何安装Jmeter.那么在本篇文章我们将要介绍Jmeter主界面有哪些功能.我们双击jmeter.bat,如下图所示(注意我这是jmeter5.0版本): 我们将Jmter主界 ...

  6. FreeBSD_11-系统管理——{Part_a-bhyve}

    ;; 创建 vm: #!/usr/bin/env zsh bridgeIF=bridge0 laggIF=lagg0 tapIF=tap0 phyIF_0=re0 phyIF_1=em0 isoPat ...

  7. jenkins集成sonar代码审核工具

    在项目测试管理过程中,项目上线很多时候时间仓促,导致代码质量不高,测试时间不充分会导致线上出现各种各样的问题,这个时候一方面是增加测试的质量把控,还要从根本上解决开发小哥的代码质量问题.而Sonar这 ...

  8. docker mysql 命令导入sql数据文件

    1.查看mysql容器 docker ps 比如我的是:94df84cbaaaa 2.复制sql文件到docker mysql里面的tmp文件夹 docker cp ./admin.sql 94df8 ...

  9. USACO2012 Moo /// 模拟 oj21548

    大致题意: 递归地描述序列:设S(0)为3个字符的序列“mo o”.然后在较长的序列小号(ķ)通过取序列的拷贝获得小号(ķ -1),则“摩... O”与ķ 2 O公司,然后该序列的另一个拷贝小号(ķ  ...

  10. 如何将sql查询出的列名用注释代替？

    如何将sql查询出的列名用注释代替? 大家正常的工作的时候,会有这样的要求,客户想要看下原始数据,但是呢.前台导出又麻烦,这时候只能从数据库拷贝出来一份.但是呢,数据库里面的字段客户又看不明白,只能用 ...