jquery操作复选框checkbox

转载 2016年06月01日 12:17:40

jquery判断checked的三种方法:

.attr('checked):                     //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'):                 //16+:true/fals

.is(':checked'):                     //所有版本:true/false,别忘记冒号哦


jquery赋值checked的几种写法:

所有的jquery版本都可以这样赋值:
$("#cb1").attr("checked","checked");

$("#cb1").attr("checked",true);


jquery1.6+:prop的4种赋值:

$("#cb1″).prop("checked","checked");

$("#cb1″).prop("checked",true);            //很简单就不说了哦
$("#cb1″).prop({checked:true});             //map键值对
$("#cb1″).prop("checked",function(){
return true;                                                 //函数返回true或false

});



1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});

3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();

9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});


本文转自:http://www.wufangbo.com/jquery-pan-duan-checked/

本文转自:http://www.jb51.net/article/46469.htm

JQuery之复选框checkbox基本操作

利用JQuery实现复选框的基本操作,例如全选、全部选、获取选中值、获取未选中值、获取选中长度等操作。 下面直接看例子,例子中有详细的介绍了JQuery是如何实现这些功能的。 在使用JQuery之前要...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年07月25日 21:49
  • 3558

最常用的jQuery操作checkbox方法

最常用的jQuery操作checkbox方法
  • baidu_25310663
  • baidu_25310663
  • 2015年05月06日 10:03
  • 1152

jQuery之实战(checkbox,table)

实现功能如下:参考图片  1 页面加载时效果    2 全选效果    3 取消全选效果    4 反选效果    5 全选奇行效果    6 全选偶行效果    7 点击复...
  • qq_26926889
  • qq_26926889
  • 2016年10月16日 15:09
  • 643

jQuery 版的 CheckBox 复选框成组联动(性能改进版)

上一个版本的缺点是当组和组成员较多时,性能较差,此版主要是将所有组和组成员缓存,以达到改善性能的目的。 /* ------------------------- 复选框联动 www....
  • Triumph
  • Triumph
  • 2011年08月07日 10:25
  • 3249

【JavaScript】DOM操作复选框

DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后,足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后,被选中的所有都变成未选中。点击"全选"按钮之后,足球、篮球...
  • u013517797
  • u013517797
  • 2015年08月26日 21:05
  • 1231

jquery checkbox 再次勾选出问题 attr() prop()

jquery checkbox勾选/取消勾选的诡异问题 form> 你爱好的运动是?input type="checkbox" id="Checked...
  • Howst
  • Howst
  • 2014年07月26日 17:06
  • 1577

jQuery设置复选框只读效果的几种情况

在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方此时不可以进行勾选操作"而不让用户在此勾选,这时候就需要将复选框设置成...
  • g893465244
  • g893465244
  • 2014年12月25日 18:45
  • 1222

如何利用jQuery使复选框一键全选/全不选

我们先写一个表单: 你爱好的运动是? 全选/不全选 1 2 3 4 在第一个复选框中添加click()事件, 核心的jQuery代码如下: $(document)...
  • hxy19971101
  • hxy19971101
  • 2016年08月07日 17:09
  • 3595

解决jquery操作checkbox全选全不选无法勾选问题

解决jquery操作checkbox全选全不选无法勾选问题 最近在工作中使用jquery操作checkbox,使用下面方法进行全选、反选:$("input[name='checkbox']").att...
  • chenhongwu666
  • chenhongwu666
  • 2015年08月05日 14:41
  • 9089

jQuery 验证被选中的复选框个数

jQuery 验证被选中的复选框个数 $("#btn").click(function(){ ...
  • liruxing1715
  • liruxing1715
  • 2012年05月02日 10:32
  • 1818
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery操作复选框checkbox
举报原因:
原因补充:

(最多只允许输入30个字)