先上代码

<form>
你爱好的运动是?<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/>
<input type="button" id="CheckAll" value="全选" />
<input type="button" id="CheckNo" value="全不选" />
<input type="button" id="CheckRev" value="反选" />
</form>

  想要实现的是全选,全不选和反选三种效果,其中需要特别注意的是全选按钮这里

<script>
$(function(){
$("#CheckAll").click(function(){
$("input:checkbox").prop("checked","checked");
});
$("#CheckNo").click(function(){
$("input:checkbox").removeAttr("checked");
});
$("#CheckRev").click(function(){
$("input:checkbox").each(function(){
this.checked=!this.checked;
});
});
});
</script>

  请注意,现在使用的是prop(),如果使用attr(),那么就会出现下面这种情况:

选择“全选”按钮后,正常;点击“全不选”,正常;当这个时候再去点击“全选”按钮时,发现代码那里的“checked”=checked,但是页面上没有显示出来;

使用prop()方法后,可以解决此问题;

。。。。没有测浏览器的兼容。。。。

checkbox选中与取消选择的更多相关文章

  1. JQuery设置checkbox选中或取消等相关操作

    $("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']&quo ...

  2. 黄聪:JQUERY判断操作CHECKBOX选中、取消选中、反选、第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. $("#id" ...

  3. js中实现对checkbox选中和取消

    可以使用 element.attr('checked','checked') 来进行选中.但是不能使用 element.attr('checked','false') 来取消选中. 必须通过以下方式: ...

  4. android checkBox选中与取消

    checkView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO ...

  5. jQuery对checkbox选中和取消选中操作

    最近做项目发现jQuery对checkbox的全选和非全选操作只有第一次生效,以后就不生效了,不知道是不是jQuery版本库的问题,最终找到了一个解决方案: 把原来的下面这两句: $('input') ...

  6. easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

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

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

  8. 知识点整理01- 引用对象被子方法赋值后不改变;CheckBox 取消选择不可用问题

    1. Class 实体是引用类型,但传入方法时是null的情况在子方法中不论怎么赋值当 FirstService.SetPerson(person,ref tempMsg); 执行后Person都是n ...

  9. checkbox全选,反选,取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

随机推荐

  1. python 的 from import 机制

    [A.py] from B import D class C:pass [B.py] from A import C class D:pass 为什么执行A的时候不能加载D呢? 如果将A.py改为:i ...

  2. [问题2014A02] 解答三(降阶公式法)

    [问题2014A02] 解答三(降阶公式法) 将矩阵 \(A\) 写成如下形式: \[A=\begin{pmatrix} -2a_1 & 0 & \cdots & 0 & ...

  3. Linux下Ruby开发配置

    以CentOS为例 安装ruby:yum install ruby 安装ruby devel:yum install ruby-devel,这个装上以后,就可以使用gem安装第三方模块了 安装gem, ...

  4. 【原创】Capture CIS利用Access数据库建立封装库说明

    1.在服务器端建立新空间,方便封装库以及数据库的归档存放 服务器路径:\\192.168.1.234\Share\STG_LIB,文件夹内容如下,其中Datesheet存放物料数据手册,Pcb_Lib ...

  5. 一键式Spring集成工具 Spring Boot

    最近公司使用Spring boot进行开发,稍微了解一下,不过自我感觉把集中式配置applicate.properties搞明白,注解用过Spring MVC的boot绝对没问题的 比如拦截器:@As ...

  6. max-width实现图片的自适应

    在自适应布局中,有时候会让图片随着宽度的变化相应的放大或者缩小,或者说让图片等比缩放,但是每个图片的大小又不一样,这个时候我们就要用到max-width这个属性了. img{ max-width:10 ...

  7. 深入浅出设计模式——工厂方法模式(Factory Method)

    介绍在简单工厂模式中,我们提到,工厂方法模式是简单工厂模式的一个延伸,它属于Gof23中设计模式的创建型设计模式.它解决的仍然是软件设计中与创建对象有关的问题.它可以更好的处理客户的需求变化. 引入我 ...

  8. [Selenium] 数字显示的月份转换为英文显示

    如果只需要英文的前三位字母,可以自己截取.

  9. [讨论] win7封装时如何直接开通局域网共享

    ekincheng 发表于 2016-10-31 20:17:54 https://www.itsk.com/thread-371838-1-5.html Win7封装时不能像XP那样直接开启局域网共 ...

  10. Excel 2013中单元格添加下拉列表的方法

    使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了.Excel 2013较以前的版本发生了很大的变化,那么在Excel 2013是如何添加下拉列表的呢? 下 ...