JQueryは、チェックボックスのチェックボックスの選択、逆選択、送信操作を実現します

チェックボックスの最も基本的なアプリケーションは、すべてのチェックボックスを選択し、選択を解除して、送信することです。さまざまなカスケード効果を実現するには、複雑な操作をオプションにリンクする必要があります。

【例】 Jqueryを使用して、CheckBoxのすべて選択、逆選択、送信操作を実装します。

（1）ページを作成し、テーブルを作成し、テーブルの最初の列にチェックボックスのグループを配置して、チェックボックスの選択、逆選択、および送信操作を実現します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框的应用</title>
    <meta name="author" content="pan_junbiao的博客">
    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; text-align: center; padding: 5px;}
        .u_button{padding: 5px; margin-top: 10px;}
    </style>
</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" id="checkAll" /></th>
            <th>编号</th>
            <th>用户名称</th>
            <th>博客信息</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkItem" value="1"/></td>
            <td>1</td>
            <td>pan_junbiao的博客</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkItem" value="2"/></td>
            <td>2</td>
            <td>pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkItem" value="3"/></td>
            <td>3</td>
            <td>pan_junbiao的博客</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkItem" value="4"/></td>
            <td>4</td>
            <td>pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkItem" value="5"/></td>
            <td>5</td>
            <td>pan_junbiao的博客</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
        </tr>
    </table>
    <input type="button" class="u_button" value="反选" id="btnCheckedRev"/>
    <input type="button" class="u_button" value="提交" id="btnSubmit"/>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function()
    {
        //全选
        $("#checkAll").click(function(){
            $("[name=checkItem]:checkbox").prop("checked",this.checked);
        });

        //复选框组的联动效果
        $("[name=checkItem]:checkbox").click(function(){
            var flag = true;
            $("[name=checkItem]:checkbox").each(function(){
                if(!this.checked)
                {
                    flag = false;
                }
            });
            $("#checkAll").prop("checked",flag);
        });

        //反选
        $("#btnCheckedRev").click(function(){
            $("[name=checkItem]:checkbox").each(function(){
                this.checked = !this.checked;
            });
        });

        //提交
        $("#btnSubmit").click(function(){
            var idArray = new Array(); //用户ID数组
            $("[name=checkItem]:checkbox:checked").each(function(){
                idArray.push($(this).val());
            });

            if(idArray.length==0)
            {
                alert("请选择用户！");
                return;
            }

            if (!confirm("确定提交记录吗？")) {
                return;
            }

            //执行Ajax请求
            $.ajax({
                type: "POST",
                url: "/getUserIds",
                data:{
                    userIds:idArray
                },
                success: function(result) {
                    if(result==true)
                    {
                        alert("提交成功");
                    }
                    else
                    {
                        alert("提交失败");
                    }
                }
            });
        });
    });
</script>
</html>

注： attr（）メソッドを使用するとブラウザとの互換性があるため、attr（）メソッドの代わりにprop（）メソッドを使用してチェックボックスの属性値を設定していることがわかります。問題。

フォアグラウンド実行の結果：

（2）送信されたユーザーID配列を受信するバックグラウンドコントローラー（Controller）を作成し、受信したユーザーIDを出力します。

/**
 * 获取用户编号数组
 * @author pan_junbiao
 */
@ResponseBody
@RequestMapping(value = "getUserIds", method = RequestMethod.POST)
public boolean getUserIds(@RequestParam(value="userIds[]") Integer[] userIds)
{
    System.out.println("用户编号：");
    Arrays.stream(userIds).forEach(System.out::println);
    return true;
}

注： SpringMVCフレームワークはバックグラウンドで使用され、@ RequestParam（value = "userIds []"）ステートメントをコントローラーメソッドのパラメーター宣言に追加する必要があります。そうしないと、送信されたユーザーID配列を取得できません。

バックグラウンド実行結果：

JQueryは、チェックボックスのチェックボックスの選択、逆選択、送信操作を実現します

おすすめ