jQuery实现全选、全不选、反选

HTML代码

<body>
    <table style="width: 100%;">
        <tr>
            <td>
                <input id="cbx1" type="checkbox" name="all" />归去来</td>
        </tr>
        <tr>
            <td>
                <input id="cbx2" type="checkbox" name="all" />勇者胜</td>
        </tr>
        <tr>
            <td>
                <input id="cbx3" type="checkbox" name="all" />武道间</td>
        </tr>
        <tr>
            <td>
                <input id="cbx4" type="checkbox" name="all" />谈判官</td>
        </tr>
        <tr>
            <td>
                <input id="cbx5" type="checkbox"  name="all"/>伪装者</td>
        </tr>
        <tr>
            <td>
                <hr />
            </td>
        </tr>
    </table>
    <input id="btn_all" type="button" value="全选" />
    <input id="btn_select" type="button" value="反选" />
    <input id="btn_not" type="button" value="全不选" />
</body>

jQuery代码:

  $(function () {
            //点击按钮全选
            $("#btn_all").click(function () {
                //name=all 的input 全部选中
                $("input[name=all]").prop("checked", true);
            });
            //点击按钮全部选
            $("#btn_not").click(function () {
                //name=all 的input 全部不选中
                $("input[name=all]").prop("checked", false);
            });
            //点击按钮反选
            $("#btn_select").click(function () {
                $("input[name=all]").each(function () {
                    //当前选中的事件等于不是当前选中的事件
                    this.checked = !this.checked
            });    
            });
        });



猜你喜欢

转载自blog.csdn.net/mogul1/article/details/80839105