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

Question

I am trying to send multiple selected checkboxes from html using jQuery/Ajax to Java. When I display the result in Java I get "activityRangeCBs[]" instead of the values I selected (ie, National, State).

The HTML is:

<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>

The jQuery/Ajax is:

        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',
        })

The Java is:

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

Answer 1

check this working code

just change this line of code activityRangelist += activityRangeCBs[i].name; to 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>