使用 jQuery/Ajax 将多个选中的复选框发送到 Java答案

【问题标题】：Send multiple selected checkboxes to Java using jQuery/Ajax使用 jQuery/Ajax 将多个选中的复选框发送到 Java
【发布时间】：2018-12-15 16:22:17
【问题描述】：

我正在尝试使用 jQuery/Ajax 将多个选中的复选框从 html 发送到 Java。当我在 Java 中显示结果时，我得到“activityRangeCBs[]”而不是我选择的值（即 National、State）。

HTML 是：

<div class="controls col-lg-10 col-md-10 col-sm-9 col-xs-8">
   <label class="checkbox-inline" for="activityRange1"><input type="checkbox" value="National" id="activityRangeCBs" name="activityRangeCBs[]">National</label>
   <label class="checkbox-inline" for="activityRange2"><input type="checkbox" value="State" id="activityRangeCBs" name="activityRangeCBs[]">State</label>
   <label class="checkbox-inline" for="activityRange3"><input type="checkbox" value="Region" id="activityRangeCBs" name="activityRangeCBs[]">Region</label>
   <label class="checkbox-inline" for="activityRange4"><input type="checkbox" value="District" id="activityRangeCBs" name="activityRangeCBs[]">District</label>
   <label class="checkbox-inline" for="activityRange5"><input type="checkbox" value="Group" id="activityRangeCBs" name="activityRangeCBs[]">Group</label>
   <label class="checkbox-inline" for="activityRange6"><input type="checkbox" value="Section" id="activityRangeCBs" name="activityRangeCBs[]">Section</label>
</div>

jQuery/Ajax 是：

        var activityRangelist = '';
        for (i = 0; i < activityRangeCBs.length; i++) {
            if (activityRangeCBs[i].checked === true) {
                if (activityRangelist.length > 0) {
                    activityRangelist += ',';
                }
                activityRangelist += activityRangeCBs[i].name;
            }
        }

        var dataToBeSent  = {
                activityRangeCBs: activityRangelist,
        }; // you can change parameter name

        $.ajax({
            url : 'E1ActivityCreateView', // Your Servlet mapping or JSP(not suggested)
            data : dataToBeSent, 
            type : 'POST',
        })

Java 是：

String activityRangeCBs = request.getParameter("activityRangeCBs"); // From Local Storage
Sring System.out.println("activityRangeCBs: " + activityRangeCBs);

【问题讨论】：

标签： java jquery html ajax

【解决方案1】：

检查此工作代码

只需更改这行代码 activityRangelist += activityRangeCBs[i].name; 到 activityRangelist += $(activityRangeCBs[i].parentNode).text();

    $(document).ready(function () {
        $('#submit').click(function () {
            var activityRangelist = '';
            for (i = 0; i < activityRangeCBs.length; i++) {
                if (activityRangeCBs[i].checked === true) {
                    if (activityRangelist.length > 0) {
                        activityRangelist += ',';
                    }
                    activityRangelist += $(activityRangeCBs[i].parentNode).text();
                }
            }

            var dataToBeSent = {
                activityRangeCBs: activityRangelist,
            }; // you can change parameter name
            console.log(dataToBeSent);
            $.ajax({
                url: 'E1ActivityCreateView', // Your Servlet mapping or JSP(not suggested)
                data: dataToBeSent,
                type: 'POST',
            })
        });
    });

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="container">
        <div class="controls col-lg-10 col-md-10 col-sm-9 col-xs-8">
            <label class="checkbox-inline" for="activityRange1"><input type="checkbox" value="National" id="activityRangeCBs" name="activityRangeCBs[]">National</label>
            <label class="checkbox-inline" for="activityRange2"><input type="checkbox" value="State" id="activityRangeCBs" name="activityRangeCBs[]">State</label>
            <label class="checkbox-inline" for="activityRange3"><input type="checkbox" value="Region" id="activityRangeCBs" name="activityRangeCBs[]">Region</label>
            <label class="checkbox-inline" for="activityRange4"><input type="checkbox" value="District" id="activityRangeCBs" name="activityRangeCBs[]">District</label>
            <label class="checkbox-inline" for="activityRange5"><input type="checkbox" value="Group" id="activityRangeCBs" name="activityRangeCBs[]">Group</label>
            <label class="checkbox-inline" for="activityRange6"><input type="checkbox" value="Section" id="activityRangeCBs" name="activityRangeCBs[]">Section</label>
            <button id="submit">Submit</button>
        </div>
    </div>

【讨论】：