通过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. Activity中满屏和去标题的实现方法

    两种方式: 在xml文件中进行配置 在项目的清单文件AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: a ...

  2. python中TCP粘包问题解决方案

    TCP协议中的粘包问题 1.粘包现象 基于TCP写一个远程cmd功能 #服务端 import socket import subprocess sever = socket.socket() seve ...

  3. hdu2089-不要62-（数位dp）

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. 示例：pm_multiple_models 匹配——形状匹配

    * This example program shows how to use HALCON's shape-based matching* to find multiple different mo ...

  5. CAFE: a computational tool for the study of gene family evolution

    1.摘要 摘要:我们提出了CAFE(计算分析基因家族进化),这是一个统计分析基因家族进化规模的工具.它使用随机的出生和死亡过程来模拟一个系统发育过程中基因家族大小的进化.对于一个特定的系统发育树,并给 ...

  6. DJango 基础 (4)

    Django模板标签 知识点: 基本概念 常用标签 模板标签例子 模板继承与应用 注释标签 模板标签 标签在渲染的过程中提供任意的逻辑. 这个定义是刻意模糊的. 例如,一个标签可以输出内容,作为控制结 ...

  7. java程序的三种结构

    从结构化程序设计角度出发,程序有三种结构:   顺序结构: JAVA的基本结构就是顺序结构,除非特别指明,否则就按照顺序一句一句执行顺序结构是最简单的算法结构,语句与语句之间,框与框之间是按从上到下的 ...

  8. JavaSE基础知识（1）—初识Java

    一.JAVA的背景 JAVA本身隶属的公司的是sun公司(创始公司) JAVA创始人:詹姆斯 高斯林 09年被oracle收购 JAVA的前身是Oak 二.JAVA的版本 95年 JAVA诞生96年 ...

  9. SpringMVC中的Interceptor拦截器及与Filter区别

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  10. linux svnserver的安装使用备用

    先说一下初弄者的误区,svn上传到svnserver的文件是变化了的,会被打包加入svn的版本库里边一般存在db 文件下 每次提交会生成0,1,2 这样排序的文件,在  /var/svn/apple/ ...