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

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，产品密钥作为您想要的数据集项。 选中复选框后，我使用 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，用于定位label div中的data-product（注意现在checkboxes的ids已经没用了），
• 增强了您使用的功能，将添加数组的行移到 html 中 if { … } else { … } 之后，使其仅出现一次。
• ...

…这里是sn-p：

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>