如何在使用jquery取消选中后立即检查并更新值时复选框的总值？

Question

＆＃13;

＆＃13;

$('#r4').change(function() {
  var sum = 0;
  $('#r4:checked').each(function() {
    sum += parseInt($(this).val());
  })

  $(".totcheck").val(sum);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12" style="background: whitesmoke; margin-bottom: 10px;">
    <h3 style="text-align: left">Row 4</h3>
    <div class="row">
      <div class="col-sm-12" id="Spirit" style="text-align: left;">
        <li>
          <label class="control control--checkbox">Content A
            <input type="checkbox" id="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
        <li>
          <label class="control control--checkbox"> Content B
            <input type="checkbox" id="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
        <li>
          <label class="control control--checkbox"> Content C
            <input type="checkbox" id="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
        <li>
          <label class="control control--checkbox"> Content D
            <input type="checkbox" id="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12" style="background: #ffdcdc; margin-bottom: 10px;">
    <h3 style="text-align: left;">Result</h3>
    <div class="row">
      <div class="col-sm-12" style="text-align: left;">
        <p>Total number of statements checked: <input type="number" name="total" disabled class="totcheck" style="float:none; margin-left: 10px;" />
        </p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我有一个具有不同id的复选框的几个div。我想在检查时累积复选框的值，如果取消选中一个框，则重新更新该值。

例如： 如果我检查了内容A和内容B，它会将总值更新为2，当我取消选中内容B时，它会自动将总值更新为1.

Answer 1

id必须是唯一的，所以在id的情况下它只获取第一个元素，使用类或指定选择器

＆＃13;

＆＃13;

$('input[type="checkbox"]').change(function() {
    var sum = 0;
    
    $('input[type="checkbox"]:checked').each(function() {
        sum += parseInt($(this).val());
    })

    $(".totcheck").val(sum);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12" style="background: whitesmoke; margin-bottom: 10px;">
    <h3 style="text-align: left">Row 4</h3>
      <div class="row" >
        <div class="col-sm-12" id="Spirit" style="text-align: left;">
          <li>
            <label class="control control--checkbox">Content A
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
          <li>
            <label class="control control--checkbox"> Content B
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
          <li>
            <label class="control control--checkbox"> Content C
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
          <li>
            <label class="control control--checkbox"> Content D
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
        </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12" style="background: #ffdcdc; margin-bottom: 10px;">
    <h3 style="text-align: left;">Result</h3>
      <div class="row" >
        <div class="col-sm-12" style="text-align: left;">
          <p>Total number of statements checked: <input type="number" name="total" disabled class="totcheck" style="float:none; margin-left: 10px;" />
          </p>
        </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，这是一个更短的解决方案。

＆＃13;

＆＃13;

$('input[type="checkbox"]').change(function() {
     $(".totcheck").val($('input[type="checkbox"]:checked').length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12" style="background: whitesmoke; margin-bottom: 10px;">
    <h3 style="text-align: left">Row 4</h3>
      <div class="row" >
        <div class="col-sm-12" id="Spirit" style="text-align: left;">
          <li>
            <label class="control control--checkbox">Content A
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
          <li>
            <label class="control control--checkbox"> Content B
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
          <li>
            <label class="control control--checkbox"> Content C
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
          <li>
            <label class="control control--checkbox"> Content D
              <input type="checkbox" id="r4" value="1"/>
              <div class="control__indicator"></div>
            </label>
          </li>
        </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12" style="background: #ffdcdc; margin-bottom: 10px;">
    <h3 style="text-align: left;">Result</h3>
      <div class="row" >
        <div class="col-sm-12" style="text-align: left;">
          <p>Total number of statements checked: <input type="number" name="total" disabled class="totcheck" style="float:none; margin-left: 10px;" />
          </p>
        </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该在chack box中使用class而不是id ..请参阅下面的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() { 
    $('.r4').change(function() {
  var sum = 0;
  $('.r4:checked').each(function() {
    sum += parseInt($(this).val());
  })

  $(".totcheck").val(sum);

});
    });
</script>
<div class="row">
  <div class="col-sm-12" style="background: whitesmoke; margin-bottom: 10px;">
    <h3 style="text-align: left">Row 4</h3>
    <div class="row">
      <div class="col-sm-12" id="Spirit" style="text-align: left;">
        <li>
          <label class="control control--checkbox">Content A
            <input type="checkbox" class="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
        <li>
          <label class="control control--checkbox"> Content B
            <input type="checkbox" class="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
        <li>
          <label class="control control--checkbox"> Content C
            <input type="checkbox" class="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
        <li>
          <label class="control control--checkbox"> Content D
            <input type="checkbox" class="r4" value="1"/>
            <div class="control__indicator"></div>
          </label>
        </li>
      </div>
    </div>
  </div>
</div>