Question

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

我的问题是我正在使用标签，而我得到的jQuery代码未使用标签。我只想获取label元素内的复选框的值或data-product值，并将其添加到数组中。

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，其中产品键用作所需的数据集项目。选中复选框后，我将使用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>

Answer 2

我用了一些代码，并做了以下工作：

在HTML末尾添加了<div id="selected-products"></div>，
在脚本中添加了变量data，以在data-product中定位label div（请注意，现在id中的checkbox是没用）
通过在if { … } else { … }之后移动将数组添加到html的行来增强您使用的功能，从而使其仅出现一次。
...

…这是代码段：

var priceArray = [];
jQuery(document).ready(function($) {
  $('.container-box input[type=checkbox]').each(function() {
    $(this).change(function() {
      data = $(this).parent("li").find("label div").attr("data-product");
      if (this.checked) {
        priceArray.push(data);
      } else {
        var index = priceArray.indexOf(data);
        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" 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" 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" 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>
<div id="selected-products"></div>

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

2 个答案: