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>

  

转载于:https://www.cnblogs.com/ghelement/p/4572132.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值