One checkbox checking others

Question

I want to have one checkbox that will check all others and I'm stuck. I'm trying to do that with a loop but that returns nothing.

It's an exercise so I cant change the html ids.

HTML:

       <p>
        Price for adds: <span id="price">0 usd</span>
    </p>
</div>

<div class='panel'>
    <div class='panel-body'>
        <form>
            <div class="checkbox">
                <label><input type="checkbox">All adds</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" data-price="3.50">Additional cheese, 3,50 USD</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" data-price="2.20">Salami, 2,20 USD</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" data-price="5.00">Additional Ham, 5 USD</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" data-price="4.10">pepper, 4,10 USD</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" data-price="3.50">Mushroms, 3,50 USD</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox">Clear all</label>
            </div>
            <br>
            <p>
                <button class='btn btn-primary'>Submit</button>
            </p>
        </form>
    </div>
</div>

JS:

$(function(){

        $('.panel-body').on('change','input',function(e){


           if($(this).parent().text()=='All adds'){
                var inps = $('.checkbox input');

                    $(inps).each(function{
                        $(this).prop('checked', true)
                    })


                var price = $('#price').html()
                price = price.replace("USD", "");
                price = parseFloat(price)
                var add = $(this).attr('data-price')

                if ($(this).prop('checked')) {
                    console.log($(this).text())
                    var totalPrice = parseFloat(add) + parseFloat(price)

                    $('#price').html(totalPrice.toFixed(2))
                }
                else {
                    var totalPrice =  parseFloat(price) - parseFloat(add)
                    $('#price').html(totalPrice.toFixed(2))
                }
        })


})

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — tao, May 13 '17 at 20:08
`$(inps).each(function{` should be `$(inps).each(function(){` — Jordan Soltman, May 13 '17 at 20:11

score 0 · Answer 1 · answered May 13 '17 at 20:34

0

You have a typo:

$(inps).each(function{
                        $(this).prop('checked', true)
                    })

You should change this:
$(inps).each(function{

To this:
$(inps).each(function(){

answered May 13 '17 at 20:34

Sagiv b.g

30,379
9
68
99

Dalin Huang · Accepted Answer · 2017-05-13T20:42:56.140

1st you are missing () after function:

  $(inps).each(function() {
    $(this).prop('checked', true)
  })

2nd use trim() to remove whitespace from both sides$(this).parent().text().trim()

3rd the if you have is closed with )} which is wrong, just use )

4th Instead of using each you can just do $('.checkbox input').prop('checked', true):

  if ($(this).prop('checked')) {
    $('.checkbox input').prop('checked', true)
  } else {
    $('.checkbox input').prop('checked', false)
  }

This allowed you to uncheck all as well.

$(function() {

  $('.panel-body').on('change', 'input', function(e) {

    if ($(this).parent().text().trim() == 'All adds') {

      if ($(this).prop('checked')) {
        $('.checkbox input').prop('checked', true)
      } else {
        $('.checkbox input').prop('checked', false)
      }

      var price = $('#price').html()
      price = price.replace("USD", "");
      price = parseFloat(price)
      var add = $(this).attr('data-price')

      if ($(this).prop('checked')) {
        console.log($(this).text())
        var totalPrice = parseFloat(add) + parseFloat(price)

        $('#price').html(totalPrice.toFixed(2))
      } else {
        var totalPrice = parseFloat(price) - parseFloat(add)
        $('#price').html(totalPrice.toFixed(2))
      }
    }

  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>
    Price for adds: <span id="price">0 usd</span>
  </p>
</div>

<div class='panel'>
  <div class='panel-body'>
    <form>
      <div class="checkbox">
        <label>
          <input type="checkbox">All adds</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" data-price="3.50">Additional cheese, 3,50 USD</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" data-price="2.20">Salami, 2,20 USD</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" data-price="5.00">Additional Ham, 5 USD</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" data-price="4.10">pepper, 4,10 USD</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" data-price="3.50">Mushroms, 3,50 USD</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox">Clear all</label>
      </div>
      <br>
      <p>
        <button class='btn btn-primary'>Submit</button>
      </p>
    </form>
  </div>
</div>

@Marduuk check my updated answer, hope it helps, also allowed you to uncheck all when you click the checked All option. — Dalin Huang, May 13 '17 at 20:43

score -1 · Answer 3 · answered May 13 '17 at 20:10

-1

Give your main checkbox an id "cAll". and use jQuery:

    $("#cAll").click(function(){
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

answered May 13 '17 at 20:10

effone

2,053
1
11
16

I know, with a proud down vode. Pleasure it helped. – effone May 14 '17 at 09:28

One checkbox checking others

3 Answers3