jquery - 单击复选框标签时获取复选框值并从数组中添加/删除其值

Question

我已经有了一个用于向数组添加/删除值的起始代码。从这篇文章中得到 - jquery add / remove item from array

我的问题是我正在使用标签，而我得到的 jquery 代码没有使用标签。我只想获取标签元素内复选框的值或数据产品值并将其添加到数组中。

var priceArray = [];
jQuery(document).ready(function($) {
  $('.container-box input[type=checkbox]').each(function() {
    $(this).change(function() {
      if (this.checked) {
        priceArray.push($(this).val());
        $("#selected-products").html("array=[" + priceArray + "]");
      } else {
        var index = priceArray.indexOf($(this).val());
        if (index > -1) {
          priceArray.splice(index, 1);
        }
        $("#selected-products").html("array=[" + priceArray + "]");
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-box">
  <ul class="clearfix">
    <li>
      <div class="add-checkmark"></div>
      <input class="prod-checkbox" name="wagyu_beef[]" type="checkbox" value="4 - 6oz Teres Majors" id="wb1">
      <label for="wb1">
                <div class="fusion-modal-text-link" title="Click for item details" data-product="4 - 6oz Teres Majors" data-class="wb1" data-toggle="modal" data-target=".fusion-modal.wb1" href="#"><img src="teresmajors.jpg" alt="" class="alignnone size-thumbnail"></div>
            </label>
      <span>4 - 6oz</span>
      <span title="Teres Majors" class="description">Teres Majors</span>
    </li>
    <li>
      <div class="add-checkmark"></div>
      <input class="prod-checkbox" name="wagyu_beef[]" type="checkbox" value="4 - 6oz Top Sirloin" id="wb2">
      <label for="wb2">
                <div class="fusion-modal-text-link" title="Click for item details" data-product="4 - 6oz Top Sirloin" data-class="wb2" data-toggle="modal" data-target=".fusion-modal.wb2" href="#"><img src="topsirloin.jpg" alt="" class="alignnone size-thumbnail"></div>
            </label>
      <span>4 - 6oz</span>
      <span title="Top Sirloin" class="description">Top Sirloin</span>
    </li>
    <li>
      <div class="add-checkmark"></div>
      <input class="prod-checkbox" name="wagyu_beef[]" type="checkbox" value="2lbs Tenderloin Tails" id="wb3">
      <label for="wb3">
                <div class="fusion-modal-text-link" title="Click for item details" data-product="2lbs Tenderloin Tails" data-class="wb3" data-toggle="modal" data-target=".fusion-modal.wb3" href="#"><img src="delicious-grilled-steak-with-seasons-370w.jpg" alt="" class="alignnone size-thumbnail"></div>
            </label>
      <span>2lbs</span>
      <span title="Tenderloin Tails" class="description">Tenderloin Tails</span>
    </li>

  </ul>

</div>

Answer 1

您的标签有一个嵌套 div，其中产品 key 作为您想要的数据集项目。 当选中该复选框时，我使用 jQuery 获取该复选框的标签。然后我将该标签转换为 jquery 标签对象。该标签将文本和 div 作为子项，我想要该标签的 div 子项。我使用 jquery 获取标签的 div 子级，然后在 div 的数据集中查找名为 Product 的键。我这样做是为了检查和未检查，因此它位于 if 语句之外。如果我选中该复选框，我会将产品添加到数组中。如果我取消选中该复选框，我会将其从数组中删除。

<script type="text/javascript">
    var priceArray = [];
    jQuery(document).ready(function ($) {
        $('.container-box input[type=checkbox]').each(function () {
            $(this).change(function () {
                var lbl = $("label[for='" + $(this).attr("id") + "']"); //get the label with this id
                var lbel = $(lbl[0]); //cast to a jquery object
                var childdiv = lbel.context.childNodes[1]; //the div is the second child of the label
                var prdct = $(childdiv).data('product'); //get the product value from the div dataset

                if (this.checked) { 
                    priceArray.push(prdct);
                    $("#selected-products").html("array=[" + priceArray + "]");
                } else {
                    var index = priceArray.indexOf(prdct);
                    if (index > -1) {
                        priceArray.splice(index, 1);
                    }
                    $("#selected-products").html("array=[" + priceArray + "]");
                }
            });
        });
    });
</script>