单选、全选、反选、获得所有选中的checkbox

简介: 单选、全选、反选、获得所有选中的checkbox


  • 单选
/** 
 * 单选
 */
$("#check-box").find("input[name='dict_value']").each(function(){
    $(this).click(function(){
        // 设置全部取消选中
        $("#check-box").find("input[name='dict_value']").each(function(){
            this.checked = false;
        });
        // 当前选中
        this.checked = false;
    });
});
  • 全选
// js实现
$("#btn1").click(function(){
    $("input[name='checkbox']").attr("checked","true");
})
// jquery实现
$("input[type='checkbox']").attr("checked","checked");
// jquery实现
$("input[type='checkbox']").each(function(){
  this.checked=true;
});
  • 取消全选
// js实现
$("#btn2").click(function(){
    $("input[name='checkbox']").removeAttr("checked");
})
// jquery实现
$("input[type='checkbox']").each(function(){
  this.checked=false;
});
// jquery实现
$("input[type='checkbox']").removeAttr("checked");
});
  • 反选
// 实现一
$("#btn4").click(function(){
    $("input[name='checkbox']").each(function(){
        if($(this).attr("checked")){
            $(this).removeAttr("checked");
        }else{
            $(this).attr("checked","true");
        }
    })
})
// 实现二
$(":checkbox").each(function(){
  if($(this).prop("checked")){
    $(this).prop("checked",false);
  }else{
    $(this).prop("checked",true);
  }
});
// 实现三
$("#invert").click(function(){
    $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
        $(o).attr("checked",!$(o).attr("checked"));
    });
});
  • 选中所有奇数
$("#btn3").click(function(){
    $("input[name='checkbox']:odd").attr("checked","true");
})
  • 选中所有偶数
$("#btn6").click(function(){
    $("input[name='checkbox']:even").attr("checked","true");
})


相关文章
|
3月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
61 1
|
28天前
单选框
单选框。
9 1
|
6月前
复选框checkbox实现自定义样式
复选框checkbox实现自定义样式
26 1
|
6月前
layui的复选框怎么设置只能单选
layui的复选框怎么设置只能单选
|
10月前
|
JavaScript
element checkbox复选框实现全选功能
element checkbox复选框实现全选功能
|
JavaScript
关于复选框checkbox没有选中不能获取值的问题
关于复选框checkbox没有选中不能获取值的问题
140 0
关于复选框checkbox没有选中不能获取值的问题
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选
|
JavaScript
全选,全不选,反选,批量操作
js $(function () { var $choose = $("#choose input"); $("#all").click(function () { $choose.
1189 0