先上代码

<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. HTML5正则表单式验证电子邮件

    <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z] ...

  2. 有向图的强连通分量——Tarjan

    在同一个DFS树中分离不同的强连通分量SCC; 考虑一个强连通分量C,设第一个被发现的点是 x,希望在 x 访问完时立刻输出 C,这样就可以实现 在同一个DFS树中分离不同的强连通分量了. 问题就转换 ...

  3. [Android Studio] 按钮学习

    Android Studio 按钮 1. 添加一个按钮 新建一个 Blank Project 之后, 在 activity_main.xml: 中添加一个按钮, 可以使用design 模式来添加,: ...

  4. linux centos 6.5 运行MySQL Workbench 6.0找不到 libmysqlclient.so.16和libmysqlclient_r.so.16

    找到已安装mysql/lib目录下有类似文件: -rw-r--r-- root root 12月 : libmysqlclient.a lrwxrwxrwx root root 12月 : libmy ...

  5. [问题2014A08] 解答

    [问题2014A08] 解答 由假设知 \(f(A)=\mathrm{tr}(AA')\), 因此 \[f(PAP^{-1})=\mathrm{tr}(PAP^{-1}(P')^{-1}A'P')=\ ...

  6. 关于无法把程序(Adobe Fireworks CS5)添加到打开方式的解决办法

    关于无法把程序(Adobe Fireworks CS5)添加到打开方式的解决办法 最近换了新版的Adobe Fireworks CS5,发现打开图片文件时在右键“打开方式”里仍然是以前的Firewor ...

  7. Python进阶之“属性(property)”详解

    Python中有一个被称为属性函数(property)的小概念,它可以做一些有用的事情.在这篇文章中,我们将看到如何能做以下几点: 将类方法转换为只读属性 重新实现一个属性的setter和getter ...

  8. Android学习简单总结

    1: 主要的view控件: 文字: TextView 图片: ImgView 视频:SurfaceView ... 2:控件 PopupWindow 实现类似左边导航栏 tabhost实现顶部或者下部 ...

  9. 封装对MongoDB数据库的增删改查访问方法(基于MongoDB官方发布的C#驱动)

    本文利用MongoDB官方发布的C#驱动,封装了对MongoDB数据库的增删改查访问方法.先用官方提供的mongo-csharp-driver ,当前版本为1.7.0.4714 编写数据库访问帮助类 ...

  10. <hr/> 水平线样式

    <hr style="width:490px;" /> <hr size=8 style="COLOR: #ffd306;border-style:ou ...