jquery操作复选框的总结

转载 2017年09月13日 19:28:43

jquery操作复选框(checkbox)的12个小技巧总结

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);
});

有写错的地方,欢迎指正,不胜感激!
笔者QQ群:148042812

JQuery之复选框checkbox基本操作

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

jquery实现复选框的全选操作

最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。 实现细节如...
  • mj158518
  • mj158518
  • 2016年07月20日 00:30
  • 3591

最常用的jQuery操作checkbox方法

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

jQuery操作input值的各种方法总结

获取选中的值 获取一组radio被选中项的值 复制代码 代码如下: var item = $('input[@name=items][@checked]').val(); 获取...
  • u014796999
  • u014796999
  • 2016年08月09日 15:58
  • 377

jQuery之实战(checkbox,table)

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

jquery复选框的操作

1、获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked")...
  • qq_36074058
  • qq_36074058
  • 2017年05月02日 14:22
  • 142

【JavaScript】DOM操作复选框

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

jquery的复选框操作

为什么不用attr设置要用prop设置 因为用attr设置点击一次就没效果了 用下面这种不会出现没效果的情况 $("#but").click(function(){ var val=this.che...
  • qq_38999509
  • qq_38999509
  • 2017年08月05日 10:47
  • 87

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

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

jquery multiselect下拉复选框应用

1.引入CSS、JS文件:jquery ui theme主题CSS、multiselect CSS、jquery库、multiselct JS 2.HTML代码 选项1...
  • beijing20110905
  • beijing20110905
  • 2014年12月29日 11:22
  • 5140
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery操作复选框的总结
举报原因:
原因补充:

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