复选框的全选 / 全不选 / 反选

一、全选操作

<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<input type="button"  id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反选" />

$("#CheckedAll").click(function () {  
     $("[name=items]:checkbox").attr("checked", true);
});

 

二、全不选操作

$("#CheckedNo").click(function () {  
    $("[name=items]:checkbox").attr("checked", false);
});

 

三、反选

//jquery方法
$("#CheckedRev").click(function () {
    $("[name=items]:checkbox").each(function () {
        $(this).attr("checked",!$(this).attr("checked"));
    });
});
//原生js方法
$("#CheckedRev").click(function () {
    $("[name=items]:checkbox").each(function () {
        this.checked = !this.checked;
    });
});

 

四、全选、全不选是复选框的形式

<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<input type="checkbox" id="CheckedAll" value="全选" />全选

$(function () {
    $("#CheckedAll").click(function () {  //点击全选，对应其他的复选框也选择
        $("[name=items]:checkbox").prop("checked", this.checked);  //如果全选按钮时选中的，其他按钮也选中。全选不是选中的，其他按钮也不选中。checked属性不能用attr(),需要用.prop()方法获取
    });
    $("[name=items]:checkbox").click(function () {  //当点击复选框的时候，判断是否是全选状态
        var flag = true;  //如果复选框都选了，值为true
        $("[name=items]:checkbox").each(function () {  //判断每个复选框的选中状态
            if (!this.checked) { //如果有一个没有选中，则flag为false
                flag = false;
            }
        });
        $("#CheckedAll").prop("checked", flag);  
    });
});