【Javascript】【jQuery】通过jQuery方法扩展,简化全选功能代码


    <body>
        <input type="checkbox" class="item">Item</input>
        <input type="checkbox" class="item">Item</input>
        <input type="checkbox" class="item">Item</input>
        <input type="checkbox" class="item">Item</input>
        <input type="checkbox" class="item">Item</input>
        <br/>
        <button id="bt-check">Check</button>
        <button id="bt-uncheck">Uncheck</button>
        <button id="bt-reverse">Reverse</button>
    </body>

    <script>
        $(function () {
            //给jQuery结果集对象扩展全选方法
            var actionHandler = {
                check: function () {
                    //全部选择
                    this.prop("checked", true);
                },
                uncheck: function () {
                    //全部取消
                    this.prop("checked", false);
                },
                reverse: function () {
                    //逐个反选
                    this.each(function () {
                        this.checked = !this.checked;
                    });
                }
            };
            jQuery.fn.extend(actionHandler);

            //绑定事件
            $("#bt-check").click(() => {
                $(".item").check();
            });
            $("#bt-uncheck").click(() => {
                $(".item").uncheck();
            });
            $("#bt-reverse").click(() => {
                $(".item").reverse();
            });
        });
    </script>

猜你喜欢

转载自blog.csdn.net/u013718730/article/details/89948410
今日推荐