一个复选框检查其他复选框

Question

我想要一个复选框来检查所有其他复选框，但我被卡住了。我正在尝试使用循环来执行此操作，但没有返回任何内容。

这是一个练习，所以我不能更改 html id。

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


})

Answer 1

第一个你在函数之后缺少()：

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

第二次使用trim()从两边删除空格$(this).parent().text().trim()

您拥有的第三个if 以)} 关闭，这是错误的，只需使用)

4th 而不是使用each，您可以只使用$('.checkbox input').prop('checked', true)：

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

这也允许您取消选中所有选项。

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

Answer 2

你有一个错字：

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

你应该改变这个：
$(inps).each(function{

致此：
$(inps).each(function(){

Answer 3

为您的主复选框指定一个 ID“cAll”。并使用 jQuery：

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