jquery checkbox - 仅获取选中复选框的值答案

【问题标题】：jquery checkbox - get the value of only the checked checkboxjquery checkbox - 仅获取选中复选框的值
【发布时间】：2015-10-30 15:23:05
【问题描述】：

$(function() {
  $('input[type=checkbox]').change(
    function() {

      if ($(this).is(':checked')) {
        document.getElementById("chk_option").value += this.value + ",";
        alert($("#chk_option").val());
      } else {
        document.getElementById("chk_option_remove").value += this.value + ",";
      }


    }
  );
});

<div>

  <center>
    <form id="form_tarif" class="form-horizontal" style="padding-top:57px;" action="pricesinput" method="POST">

      <input type="hidden" id="chk_option" name="chk_option">

      <input type="hidden" id="chk_option_remove" name="chk_option_remove">

      <c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop">
        <div class="checkbox1">
          <label>
            <input type="checkbox" name="tarif_inclue[]" value="${option_tarif.id}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">${option_tarif.libelle}
          </label>
        </div>
      </c:forEach
   </form>
 </center>

</div>

嗨，

你能帮我处理下面的JS吗？我只需要获取选中复选框的值并在 id #chk_option 中使用它。然后我将在我的 Java 代码中使用这个 id 来插入数据库。

下面是我的部分java代码：

String currentTypeTarifIdStr = request.getParameter("current_typetarif_id");
        Integer currentTypeTarifId = Integer.valueOf(currentTypeTarifIdStr);

        String TypeTarifIdToRemoveStr = request.getParameter("typetarif_id_to_remove");
        Integer TypeTarifIdToRemove = Integer.valueOf(TypeTarifIdToRemoveStr);

        Integer trimmedOptionSplit = 0;
        String optionChkStr = request.getParameter("chk_option");
        String[] optionSplitStrs = optionChkStr.split(",");


        String TypeTarifOptionToRemoveStr = request.getParameter("typetarif_option_to_remove");
        Integer TypeTarifOptionToRemove = Integer.valueOf(TypeTarifOptionToRemoveStr);





                        query = mEntityManager.createQuery("DELETE FROM TarifTypeOptionEntity WHERE typeTarifId=:pId");
                        int deletedCount = query.setParameter("pId", currentTypeTarifId).executeUpdate();
                        mUserTransaction.commit();


                        for (String optionSplitStr : optionSplitStrs) {
                            String trimmedOptionSplitStr = optionSplitStr.trim();
                            // do something with trimmedOptionSplitStr
                            if (!trimmedOptionSplitStr.equals("")) {
                                trimmedOptionSplit = Integer.valueOf(trimmedOptionSplitStr);
                            }

                            mUserTransaction.begin();
                            TarifTypeOptionEntity typeTarifTypeOption = new TarifTypeOptionEntity();
                            typeTarifTypeOption.setTypeTarifId(currentTypeTarifId);
                            typeTarifTypeOption.setTarifOptionId(trimmedOptionSplit);
                            mEntityManager.persist(typeTarifTypeOption);
                        mUserTransaction.commit();
                        }

                    mUserTransaction.begin();
                    }

我将首先删除数据库中的所有内容，然后仅在数据库中插入选中的复选框。为此，我应该用逗号连接所有检查的值。然后在我的java代码中，我将它拆分并删除逗号。

但这并没有发生。有人可以帮我编写代码并找出我做错了什么。

编辑：

控制台中没有错误，并且警报确实有效。事实上，这段代码工作得很好。单击复选框时，将执行 if 子句，每次我选中另一个复选框时，都会在逗号后面添加值。这是我在 java 中需要的那些值。但这并不是我从这段代码中需要的。

现在它只将复选框中未选中的值添加到数据库中。但是当然这不可能发生，因为这个值已经存在， . 所以我得到了错误原因：com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: Cannot add or update a child row: a foreign key constraint fails (locforall_booking.t_be_tarif_type_option, CONSTRAINTfk_t_be_type_tarif_option_t_be_tarif_option1FOREIGN KEY (be_tarif_option_id) REFERENCESt_be_tarif_option@987654

我的问题场景：如果当我检查了 2 个值并且我没有取消选中它但检查了第三个值，它将删除数据库中的所有内容并只保留第三个值。但我真正需要的是它删除数据库中的所有内容并保留所有值，包括第三个值。

有 Javascript 专家可以帮忙吗？

【问题讨论】：

您是否尝试过调试您的 Java 代码是否被调用？您的浏览器的开发者控制台对 JavaScript 有什么看法？我没有看到您进行任何服务器调用...
我已经更新了我的帖子来回答您的问题。感谢您的回复。
我不是 JavaScript 专家，但既然您使用的是 jQuery，为什么还要使用标准 dom 操作方法 (document.getElementById("chk_option")) 访问隐藏字段？要测试它是否是您的 JavaScript，您可以手动设置一个值（直接进入隐藏字段）并检查该值是否传递给 servlet。
@thomas 你能给我举个例子来说明你的意思吗？
我不确定我是否理解您的问题，但我猜您的意思是第二部分，即只需将初始值添加到隐藏字段定义 value="somethingcompletelyirrelevantjusttocheckyouseethisinjava"。然后不要点击任何复选框，而是按原样提交表单。如果您在 Java 代码中获得该值，则问题很可能出在您的 JavaScript 代码中，您可以相应地改写您的问题并提出SSCCE。

标签： javascript java jquery checkbox

【解决方案1】：

您可以使用 2D 数组来执行此操作：

<html>

    var items = [["abc.jpg", "xyz.jpg"],["123.jpg","345.jpg"]];
    alert(items[1][1]); // 345.jpg
</script>
</html>

【讨论】：