How to add data values of checkboxes in jquery

Question

I have checkbox type inputs and using jquery I am trying to add the numbers which are in its data-price attribute

$(document).ready(function() {

  $(".dateboxes").click(function() {
    var total = 0;
    var price = parseInt($(this).attr('data-price'));
    //alert(price);
    if ($(this).attr('checked', true)) {
      total = total + price;
      $(this).prop('checked', this.value == 1);
    }

    if ($(this).attr('checked', false)) {
      total = total + price;
      $(this).prop('checked', this.value == 0);
    }
    alert(total);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_8"><span>08th</span> <br/><span>Wed</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_8" class="dateboxes date-inputs" value="2017-11-08" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_9"><span>09th</span> <br/><span>Thu</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_9" class="dateboxes date-inputs" value="2017-11-09" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_10"><span>10th</span> <br/><span>Fri</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_10" class="dateboxes date-inputs" value="2017-11-10" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_11"><span>11th</span> <br/><span>Sat</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_11" class="dateboxes date-inputs" value="2017-11-11" />
  </div>

</div>

But neither it shows right value, nor it marks as checked when clicked.

Please help

rollingthedice · Accepted Answer · 2017-11-01 21:46:47Z

2

With $(this).attr('checked', false) inside if statement you are setting property to false every time, not checking it. Use $(this).is(':checked') which returns true or false to see if a checkbox is checked.

Also if you want to increase the total value on every click, you should probably declare it outside your .click function's scope. Here is a working JSFiddle. I hope this is what you seek.

EDIT: If you want to increase or decrease a total price depending on user's selected checkboxes use the following:

if ($(this).is(":checked")) {
   total = total + price;
}
if (!$(this).is(":checked")) {
   total = total - price;
}

edited Nov 1, 2017 at 21:46

answered Nov 1, 2017 at 21:41

rollingthedice

1,1258 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Phillips · Accepted Answer · 2017-11-01 21:35:31Z

Okay, well I fixed the issue of the boxes not getting checked. However it is not clear what you are trying to do with the price?

$(document).ready(function() {

  $(".dateboxes").click(function() {
    var total = 0;
    var price = parseInt($(this).attr('data-price'));
    //alert(price);
    if ($(this).attr('checked')) {
      total = total + price;
   //   $(this).prop('checked', this.value == 1);
    }
    else {
      total = total + price;
    //  $(this).prop('checked', this.value == 0);
    }
    alert(total);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_8"><span>08th</span> <br/><span>Wed</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_8" class="dateboxes date-inputs" value="2017-11-08" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_9"><span>09th</span> <br/><span>Thu</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_9" class="dateboxes date-inputs" value="2017-11-09" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_10"><span>10th</span> <br/><span>Fri</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_10" class="dateboxes date-inputs" value="2017-11-10" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_11"><span>11th</span> <br/><span>Sat</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_11" class="dateboxes date-inputs" value="2017-11-11" />
  </div>

</div>

Collectives™ on Stack Overflow

How to add data values of checkboxes in jquery

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related