单选、全选、反选、获得所有选中的checkbox_js 获取所有选中的单选框-优快云博客

本文链接：https://blog.youkuaiyun.com/ximaiyao1984/article/details/120286564

本文深入讲解了使用JavaScript和jQuery操作Checkbox的各种技巧，包括单选、全选、反选、选择奇数和偶数项等实用功能，为网页交互设计提供了丰富的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单选

/** 
 * 单选
 */
$("#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");
})