先上代码

<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. Android自定义View (二) 进阶

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自定义View之旅,前面已经介绍过一个自定义View的基础的例 ...

  2. Linux 各文件夹介绍

    http://www.cnblogs.com/amboyna/archive/2008/02/16/1070474.html linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命 ...

  3. 【Spring】对象后期处理,BeanPostProcessor

    当我们使用Spring容器管理对象时,需要对对象进行一些后期处理时,比如数据处理.数据预加载,可以使用BeanPostProcessor接口. 简单演示它的用法. 定义扫描包,显示定义BeanPost ...

  4. 11-JS基础

    JS声明变量 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) **提示:JavaScript 语句和 JavaScript 变量 ...

  5. [问题2014S11] 复旦高等代数II(13级)每周一题(第十一教学周)

    [问题2014S11]  设 \(A,B\) 为 \(n\) 阶实对称阵, \(p(A),p(B),p(A+B)\) 分别为 \(A,B,A+B\) 的正惯性指数, 证明: \[p(A)+p(B)\g ...

  6. Quality assessment and quality control of NGS data

    http://www.molecularevolution.org/resources/activities/QC_of_NGS_data_activity_new table of contents ...

  7. boost 编译,windows平台

    下载Boost及生成bjam.exe文件 到Google网站搜索下载boost_1.52版本库,下载完成后,解压到X:下,这个地址自己随便定义.在解压的文件中搜索build.bat文件,把它所在的目录 ...

  8. Centos系统下Lamp环境的快速搭建(超详细,转)

    lamp的搭建对于初学者是一件很头疼的事情,所以借此机会把自己当初快速搭建linux+apche+mysql+php的方法分享大家希望能到你. 工具/原料 虚拟机及Centos操作系统 Linux基本 ...

  9. Mvc导入导出Excel

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2&g ...

  10. [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 )

    [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...