Get values from set of html elements using jQuery when the corresponding checkbox is selected to send the values spring-mvc controller

Question

我有只使用 div 标签编码的表格（即没有表格标签）。在每一行中，我都有一组相同的 html 元素作为复选框、一个下拉列表、另一个下拉列表和一个数量微调器。同一组元素在 5 行中。我需要获取选中复选框的特定行中所有 html 元素的值。我需要使用 jQuery 和 ajax 自动化这个功能，最后我需要将这些值发送到控制器方法以便发送到数据库。我怎样才能做到这一点？ （只是我知道$('checkBox').is(":checked")时应该这样做）

这里是jsp页面中表格的两行代码：

<div class="row item-tbl-row">
    <div class="col-xs-2">
        <label class="checkbox-inline">
            <form:checkbox value="pizza" class="checkbox chkbxPkgCat" path="categoryName" id="chkPkgPzza"/>
            Pizza
        </label>
    </div>
    <div class="col-xs-3">
        <form:select type="text" class="form-control" path="itemName" id="slctItmPkgPzza">
            <form:option value="-" label="---"/>
        </form:select>
    </div>
    <div class="col-xs-3">
        <form:select type="text" class="form-control" path="" id="szpr1">
            <form:option value="-" label="---"/>
        </form:select>
    </div>
    <div class="col-xs-2">
        <input class="qty-spinner" type="number" value="0" min="0" id="qtySp1"/>
    </div>
</div>

<div class="row item-tbl-row">
    <div class="col-xs-2">
        <label class="checkbox-inline">
            <form:checkbox value="Salad" class="checkbox chkbxPkgCat" path="content"/>
            Salad
        </label>
    </div>
    <div class="col-xs-3">
        <form:select type="text" class="form-control" path="itemName" id="slctItmPkgSalad">
            <form:option value="-" label="---"/>
        </form:select>
    </div>
    <div class="col-xs-3">
        <form:select type="text" class="form-control" path="" id="szprc2">
            <form:option value="-" label="---"/>
        </form:select>
    </div>
    <div class="col-xs-2">
        <form:input class="qty-spinner" type="number" value="0" path="content" min="0"/>
    </div>
</div>

我应该为每个选中的复选框使用 for 循环吗？或者如何编写一个函数并为每个元素传递参数？有人可以帮我吗？ 提前致谢。

Answer 1

检查下面的代码

/* 点击复选框时调用此方法 */

var url = /*url*/;

$.post(url,
        {
          name: "Abc",
          city: "Pqr"          /** Create json of yout data **/
        },
        function(data){
            alert("Data: " + data);/*Return data from Spring Mvc controller*/
        });

/* 控制器 * /

@RequestMapping(value = "/saveData", method = RequestMethod.POST)
@ResponseBody public String saveDate(@RequestParam String name,@RequestParam String city)
{
    /* Database operation */

}

在控制器中添加此方法