Get checkbox value when clicking the checkbox label and add/remove its value from array

Question

I already have a starting code for the adding/removing of value into array. Got from this post - jquery add / remove item from array

My problem is i'm using label, and the jquery code i get isn't using label. I just wanted to get the value of the checkbox or the data-product value inside the label element and add it into the array.

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>

L0uis · Accepted Answer · 2018-12-14 16:03:56Z

Your label has a nested div, with the product key as the dataset item you want. When the checkbox is selected, I get the label for the checkbox using jQuery. Then I cast that label to a jquery label object. This label has the text and a div as children, and I want the div child of the label. I get the div child of the label using jquery, then I look in the div's dataset for a key named product. I do this for checked an unchecked so it is outside the if statement. If I am checking the checkbox, I add the product to the array. If I am unchecking the checkbox I am removing it from the array.

<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>

halfer · Accepted Answer · 2018-12-16 19:49:15Z

I played a little with your code and did the following:

Added <div id="selected-products"></div> at the end of your HTML,
Added the variable data in the script, to target the data-product in the label div (Note that now the ids of the checkboxes are useless),
Enhanced the function your used, by moving the line that add the array to the html after the if { … } else { … }, so that it appears only once.
...

… Here is the snippet:

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>

Collectives™ on Stack Overflow

Get checkbox value when clicking the checkbox label and add/remove its value from array

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related