<input type="checkbox" name="checkAll" 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
全选/取消全选
1
2
3
4
5
var val = $("#id1").val();//获取指定id为id1的复选框的值
var isSelected = $("#id3").prop("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,即第三项为选中状态
$("input[type=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
alert($(this).val());
});
var isSelected = $("#id3").is(":checked");//判断id=id3的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false;
alert(isSelected);
/**
* 全选和全不选
*/
$("#checkAll").click(function(){//两种方式均可
/* if($(this).prop("checked") == true){// 全选
$("input[name=checkbox]").each(function(){
$(this).prop("checked", true);
});
} else {// 取消全选
$("input[name=checkbox]").each(function(){
$(this).prop("checked", false);
});
} */
if($(this).is(":checked")) {
$("input[name='checkbox']").each(function() {
this.checked = true;
});
} else {
$("input[name='checkbox']").each(function() {
this.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);
}
});