您的位置：首页 > Web前端 > JQuery

jquery 完成checkBox完成全选\全不选\反选的功能

2017-12-18 22:45 441 查看

//本例子中要注意.prop和attr的区别:

.prop:获取原生属性时使用

.attr:获取自己添加的属性使用

<head>

    <script src="Scripts/jquery-3.1.1.js"></script>

    <meta charset="utf-8" />

    <script>

        $(function () {

           // $('*').attr('banjimingcheng', '.netheuma3');

            //全选

            $('#btnChkAll').click(function () {

                $('input[type=checkbox]').attr('checked', true);

            })

            //全不选

            $('#btnNoneChk').click(function () {

                $('input[type=checkbox]').attr('checked', false);

            })

            //反选

            $('#btnChkReverse').click(function () {

                //第一种写法

                //$.each($('input[type=checkbox]'), function (k, v) {

                //    $(v).prop('checked', !$(v).attr('checked'));

                //})

                //第二种写法

                $('input[type=checkbox]').prop('checked', function (index, attr_val) {

                    return !attr_val;

                });

                //当要获取一个js dom对象的原生属性时,要是用prop()来获取,或者设定

            });

        })

    </script>

    <title></title>

</head>

<body>

    <input type="button" name="name" value="全选" id="btnChkAll" />

    <input type="button" name="name" value="全不选" id="btnNoneChk" />

    <input type="button" name="name" value="反选" id="btnChkReverse" />

    <input type="checkbox" name="name" value="" id="chkBox1" />

    <input type="checkbox" name="name" value="" id="chkBox2" />

    <input type="checkbox" name="name" value="" id="chkBox3" />

    <input type="checkbox" name="name" value="" id="chkBox4" />

    <input type="checkbox" name="name" value="" id="chkBox5" />

    <p>

        ppppppppppp

    </p>

    <div>

        divdvi

    </div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web jquery checkbox

相关文章推荐

新的分享

章节导航