active and inactive div on toggle

Question

I am trying to make a select button when user select or deselect the value onclick it select's and when click again it deselect's the value and changes the value as well of the textbox when users selects the div it will show that this div is selected and the textbox value is changed and when user clicks again the div will become inactive and the value of textbox will change again and when all div's are selected it will add up all addon values like if it selects 1 value of textbox will be 2 when selects 2nd the value of textbox will become 4 and so on right now the value is changing and also the div is activating but when we click all of the div with same class is activating and deactivating I am unable to find out the bug I hope you know what I am talking about

$(document).ready(function() {
 $('.js-mc-checkbox', this).on('click', function() {
  $('.js-mc-checkbox').toggleClass('active');
        var old_val = $('.price_addon').val();
        var new_val = old_val + $(this).attr('data-addon');
  $('.price_addon').val(new_val);
 });
});

.active {
   background:#333 !important;
   color:#fff;
}

.js-mc-checkbox {
 background:#f7f7f7;
 width:150px;
 height:40px;
 float:left;
 margin-right:20px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div data-addon="202" class=" js-mc-checkbox add-on-item">
  <div class="meta">
    <span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="203" class=" js-mc-checkbox add-on-item">
  <div class="meta">
    <span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="204" class=" js-mc-checkbox add-on-item">
  <div class="meta">
    <span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<input type="text" name="price_addon" class="price_addon" value="" />

cyr_x · Accepted Answer · 2017-08-23T01:19:11.003

The problem with your code was that you forgot to parse the value of data-addon and the input value into a number and you forgot to substract it when the button deactivates.

This will work:

$(document).ready(function() {
  var $boxes = $('.js-mc-checkbox');
  var $input = $('.price_addon');
  var activeClass = 'active';
  var dataAttr = 'data-addon';

  $boxes.on('click', function() {
    var value = parseInt($input.val() || 0);

    $(this).toggleClass(activeClass);

    if($(this).hasClass(activeClass)) {
       value += parseInt($(this).attr(dataAttr));
    } else {
       value -= parseInt($(this).attr(dataAttr));
    };

    $input.val(value);
  });
});

.active {
   background:#333 !important;
   color:#fff;
}

.js-mc-checkbox {
 background:#f7f7f7;
 width:150px;
 height:40px;
 float:left;
 margin-right:20px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div data-addon="202" class=" js-mc-checkbox add-on-item">
  <div class="meta">
    <span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="203" class=" js-mc-checkbox add-on-item">
  <div class="meta">
    <span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="204" class=" js-mc-checkbox add-on-item">
  <div class="meta">
    <span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<input type="text" name="price_addon" class="price_addon" value="" />

great bro thumbs up for you I am glad you helped your code is bit difficult for me as you have used and made code in a different way why you used $ sign after every variable ? — Usman Khan, Aug 23 '17 at 01:18
My bad ment to made them as a variable prefix not suffix, `$` as an variable prefix is a common thing that gives people a hint that the value is a jQuery wrapped object. — cyr_x, Aug 23 '17 at 01:20
okay great it made me learn new thing though is there a link you can refer so I can learn this way as well ? — Usman Khan, Aug 23 '17 at 01:21
There's an answered [question](https://stackoverflow.com/questions/6209462/when-why-to-prefix-variables-with-when-using-jquery) why people use the `$` as variable prefix when using jQuery. — cyr_x, Aug 23 '17 at 01:23

active and inactive div on toggle

1 Answers1