正文
jQuery checkbox 全选
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
jQuery 1.6版本以后 if($("#id").attr("checked")) 不能返回 ture 和 false
高版本中jQuery 提供prop
它将“属性”与“特性”做了区别，属性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性
//获取是否选中
var isChecked = $('#id').prop('checked');
//或
var isChecked = $('#id').is(":checked");
//设置选中
$('#id').prop('checked' true)
<input id="btnCheckAll" type="checkbox" />全 <input id="Checkbox2" name="chkItem" type="checkbox" />1
<input id="Checkbox3" name="chkItem" type="checkbox" />2
<input id="Checkbox4" name="chkItem" type="checkbox" />3<div>
<input id="btnCheckAll" type="button" value="全选" />
<input id="btnCheckNone" type="button" value="全不选" />
<input id="btnCheckReverse" type="button" value="反选" />
<input id="btnSubmit" type="button" value="提交" />
</div>
<script type="text/javascript">
$(function ()
{
$("#ccbCheckAll").click(function ()
{
//多种实现方式
//方式1
//if ($("#ccbCheckAll").prop('checked'))
// {
// $("input[name = 'chkItem']").prop("checked", true);
// }
// else
// {
// $("[name = chkItem]:checkbox").attr("checked", false);
// }
//方式2 $("#ccbCheckAll").prop("tagName"); //INPUT
//$("input[name='chkItem']").prop("checked", $(this).prop('checked'));
//方式3
//$("[name = chkItem]:checkbox").prop("checked", $(this).prop('checked'));
//方式4
$("[name = chkItem]").prop("checked", $(this).prop('checked'));
}); $("input[name = 'chkItem']").click(function ()
{
$("[name = chkItem]").prop("checked", $(this).prop('checked'));
});
//按钮形式
//全选
$("#btnCheckAll").bind("click", function ()
{
$("[name = chkItem]:checkbox").prop("checked", true);
});
// 全不选
$("#btnCheckNone").bind("click", function ()
{
$("[name = chkItem]:checkbox").prop("checked", false);
});
// 反选
$("#btnCheckReverse").bind("click", function ()
{
$("[name = chkItem]:checkbox").each(function ()
{
$(this).prop("checked", !$(this).prop("checked"));
});
});
$("#btnSubmit").bind("click", function ()
{
var result = new Array();
$("[name = chkItem]:checkbox").each(function ()
{
if ($(this).is(":checked"))
{
result.push($(this).prop("value"));
}
});
alert(result.join(","));
});
}) </script>
