jQuery操作checkbox的方法

checkbox：复选框。
操作实例：jQuery操作checkbox的方法

下面的html为例进行checkbox的操作。

<input type="checkbox" name="checkbox" id="checkAll" />全选/取消全选
<input type="checkbox" name="checkbox" id="id1" value="1" />1
<input type="checkbox" name="checkbox" id="id2" value="2" />2
<input type="checkbox" name="checkbox" id="id3" value="3" />3
<input type="checkbox" name="checkbox" id="id4" value="4" />4
<input type="checkbox" name="checkbox" id="id5" value="5" />5

选中checkbox

由于和上篇一样的原因jQuery操作radio的方法-选中radio存在的问题，所以这里不再使用attr，从而使用prop。

var isSelected = $("#id3").prop("checked");//判断id=id3的那个复选框是否处于选中状态，选中则isSelected=true;否则isSelected=false;
var isSelected = $("#id3").is(":checked");//判断id=id3的那个复选框是否处于选中状态，选中则isSelected=true;否则isSelected=false;
$("#id3").prop("checked", true);//将id=id3的那个复选框选中，即打勾
$("#id3").prop("checked", 'checked');//将id=id3的那个复选框选中，即打勾
$("#id3").prop("checked", false);//将id=id3的那个复选框不选中，即不打勾
$("#id3").prop("checked", '');//将id=id3的那个复选框不选中，即不打勾
$("input[name=checkbox][value=3]").prop("checked", 'checked');//将name=checkbox, value=3 的那个复选框选中，即打勾
$("input[name=checkbox][value=3]").prop("checked", '');//将name=checkbox, value=3 的那个复选框不选中，即不打勾
$("input[type=checkbox][name=checkbox]").get(2).checked = true;//设置index = 2，即第三项为选中状态

document.getElementById("checkAll").checked = true;//原生写法

获取当前选中的值

var val = $("#id1").val();//获取指定id为id1的复选框的值
$("input[type=checkbox][name=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
    alert($(this).val());
});

//原生写法
var ids = document.getElementsByName("checkbox");
for(var i=0;i<ids.length;i++){
    if(ids[i].checked){
        alert(ids[i].value);
    }
}

全选和全不选

$("#checkAll").click(function(){
    if($(this).is(":checked")) {
        $("input[name='checkbox']").each(function() {
            this.checked = true;
            //$(this).prop("checked", true); //同上一句
        });
    } else {
        $("input[name='checkbox']").each(function() {
            this.checked = false;
            //$(this).prop("checked", false); //同上一句
        });
    }
});

自动监听是否要选择全选框

$("input[name='checkbox']").click(function() {
    if($(this).is(":checked")) {
        var flag = true;
        $("input[name='checkbox']").each(function() {
            if(this.checked==false) {
                flag = false;
            }
        });
        if(flag==true) {//两种方式均可
            //document.getElementById("checkAll").checked = true;
            $("#checkAll").prop("checked", true);
        }
    } else {
        $("#checkAll").attr("checked", false);
    }
});