通过jQuery设置复选框为选中状态

复选框

<input type="checkbox"/>

错误代码：

$("input").attr("checked","checked");

设置以后checkbox变成选中状态，用Chrome调试看了一下，checkbox中确实有checked属性，而且值为checked，根据W3C的表单规范，checked属性是一个布尔属性，这意味着只要该 attribute 存在，即使它没有值，或是一个空字符串，该属性对应的 property 默认就是 true，也就是说和attribute的值没有关系。但是一旦通过 prop 将 property 设置为false，则使用 attr 将无法使该 checkbox 改变为选中状态。

正确代码：

$("input").prop("checked",true);

设置后复选框为选中状态了。

原因：

attributes（属性） 和 properties（特性） 之间的差异在特定情况下是很重要的。

jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。

从 jQuery 1.6 开始， .prop()方法返回 property 的值，而 .attr() 方法返回 attributes 的值。

以下推荐的是兼容浏览器的三种写法，判断 checkbox 元素的 checked 属性是否为"真" （是否被选中），elem是 JavaScript 对象：

if ( $(elem).prop("checked") ){} 
if ( $(elem).is(":checked") ){}
if ( elem.checked ) {}

代码示例：

 <html>

     <head>

         <title></title>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     </head>

     <body>

         <div>

             <input type="button" value="点击1" onclick="add1();" />

             <input type="button" value="点击2" onclick="add2();" />

             <input type="button" value="点击3" onclick="add3();" />

             <input type="checkbox" id="myinput" />

         </div>

     </body>

     <script type="text/javascript">

         //添加选中和未选中状态

         function add1(){

             if($("#myinput").prop("checked")){

                 $("#myinput").prop("checked",false);

             }else{

                 $("#myinput").prop("checked",true);

             }

         }

         function add2(){

             if($("#myinput").is(":checked")){

                 $("#myinput").prop("checked",false);

             }else{

                 $("#myinput").prop("checked",true);

             }

         }

         function add3(){

             if(document.getElementById("myinput").checked){

                 $("#myinput").prop("checked",false);

             }else{

                 $("#myinput").prop("checked",true);

             }

         }

     </script>

 </html>

jQuery判断复选框checkbox的选中状态的更多相关文章

  1. [jQuery] 判断复选框checkbox是否选中checked

    返回值是true/false method 1: $("#register").click(function(){ if($("#accept").get(0) ...

  2. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  3. jQuery判断复选框是否被选中的3种方式

    页面部分:     <input type="checkbox" id="cbx" /><label for="cbx"& ...

  4. jquery判断复选框是否被选中

    $("#isUse").click(function(){ if($(this).is(':checked')){ $(this).attr('checked','checked' ...

  5. 根据复选框checkbox的选中状态来打开或关闭隐藏层

    HTML:  <input type="checkbox" id="check-expert"> <div id="expert&q ...

  6. jquery判断复选框是否选中

    jquery判断复选框是否被选中 $(function(){ $(document).on("click", ".checkbox",function(){ v ...

  7. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  8. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  9. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

随机推荐

  1. 源码的excel导入导出

    获取所有数据,将数据进行有序切割,在进行遍历,将其导出. //设置header header("content-type:text/html;charset=utf-8"); // ...

  2. java虚拟机--->>程序计数器

    程序计数器是一块较小的内存空间,他可以看做是当前线程所执行的行号指示器.在虚拟机的概念模型(仅是概念模型,各种虚拟机可能会通过一些更高效率的方式去实现)里,字节码解释器工作室就是通过改变这个计数器的值 ...

  3. VueJs学习参考的例子

    his is a vue+mint's demo ,for loler(PAD LOL) https://github.com/yuanman0109/vue2.0-Mint-lolbox   An ...

  4. python动态模块导入

    首先创建一个模块目录lib,然后在目录内创建一个模块为:aa.py 官方推荐: import importlib aa = importlib.import_module('lib.aa') c = ...

  5. PHP开发——变量

    变量的概念 l  变量是临时存储数据的容器: l  变量是存储内存当中: l  我们现实中有很多数据:姓名.性别.年龄.学历等: l  在计算机中,用变量来代替一个一个的数据: l  我们可以把计算机 ...

  6. etcd-v2第三集

    简单说下golang的etcd接口例子.etcd api有v2(http+json)和v3(grpc)两个版本,目前大家都用v2,所以... v2: https://github.com/coreos ...

  7. mybatis电子商务平台b2b2c

    技术解决方案 开发语言: java.j2ee 数据库:mysql JDK支持版本: JDK1.6.JDK1.7.JDK1.8版本 核心技术:分布式.云服务.微服务.服务编排等. 核心架构: 使用Spr ...

  8. 201771010142 张燕《面向对象程序设计（java）》第三周学习总结

    实验三 Java基本程序设计(2) 实验时间 2018-9-13 1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟悉PTA平台线上测试环境: (3) ...

  9. HTTP协议简单认识

    一.HTTP协议简介 HTTP超文本传输协议是一种用于分布式,协作式和超媒体信息系统的应用层协议 二.HTTP协议概述 HTTP是一个客户端和服务端请求和响应的标准 三.HTTP协议工作步骤 1.客户 ...

  10. SpringMCV跨域

    不在同服务器访问就会产生跨域(用其他软件编写HTML测试) 后台Controller package edu.nf.ch02.controller; import org.springframewor ...