jquery操作checkbox的方法代码

时间：2014-08-05 编辑：简简单单来源：一聚教程网

表单在前端开发中是经常会遇到的，其中自然也少不了checkbox复选框，对于复选框的操作无外乎有以下三种：全选，全不选，反选。下面零度逍遥就给大家分析分析。

一、checkbox全选

大家都知道选择checkbox的方式是给它加上属性checked:’checked’，所以用jquery的方式就可以写成这样：

代码如下	复制代码
$('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked','checked'); })

这样点击按钮就是一个全选的操作，但其实不知道大家知道不，checkbox的这样添加属性并不是w3c所推荐的，翻看她官网的推荐，checked的属性值是一个布尔值，所以上述设置checkbox的属性checked应该为true，代码如下：

代码如下	复制代码
$('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',true); })

二、checkbox全不选

同全选，全不选刚好相反，可以这样写：

代码如下	复制代码
$('input[type=button]').click(function(){ $('input[type=checkbox]').removeattr('checked'); })

同理，最好还是写成这样：

代码如下	复制代码
$('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',false); })

三、checkbox反选

反选的逻辑就是把选中状态的变成非选中状态，把非选中状态的变成选中状态，通过上面我们可以知道checked的值是个布尔值，这样我们就能拿过来进行判断，所以代码可以写成：

代码如下	复制代码
$('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',!$(this).attr('checked')); })

这样就可以达成目的，不过这里要提到的一点是，在1.10.x的jquery中可能会无法实现上述功能，这时你需要加载个其他版本的jquery，这应该是jquery的一个小bug，具体的各位可以去测试一下

补充:发现低版本的jquery库支持 attr("checked")=="checked" 的写法，而不支持 attr("checked")==true 的写法。

所以判断复选框checkbox是否选中的兼容代码如下：

代码如下	复制代码
if($("#ch1").attr("checked")=="checked"\|\|$("#ch1").attr("checked")==true){ alert('已选中'); }else{ alert('未选中'); }