显示时加起来的复选框值不适用于隐藏的`div`

Question

我正在尝试对选中的复选框值求和，并将其显示在另一个输入字段上。

以下给出的脚本运行正常。但是当与Project一起显示时，它不适用于div CSS隐藏的display:none。

.show();

 function showCheckboxes(){
        $('.checkboxes').show();  
    }


    $(document).ready(function() {
    function Calculate() {
      var sum = 0;
      $(".add:checked").each(function(i, n) {sum += parseInt($(n).val());})
      $("#sum").val(sum);
    }
    $(".add").change(Calculate);
    Calculate();
    })

.checkboxes {
      display:none;
      margin-top: 20px;
      } 

Answer 1

如果您希望在显示复选框时自动选中它们，请在显示功能中添加以下内容：

$('.add').trigger('click');

.trigger()方法允许您以编程方式触发事件（无需用户手动输入）。 BTW ID不能重复，它们必须是唯一的，因此请将三个<div id='selection'...>更改为<div class='selection'...>。

$('button').on('click', showC);
$(".add").on('change', calcC);

function showC() {
  $('.checkboxes').show();
  $('.add').trigger('click');
}

function calcC() {
  var sum = 0;
  $('.add:checked').each(function() {
    sum += parseInt($(this).val(), 10);
  });
  $("#sum").val(sum);
}

.checkboxes {
  display: none;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button> show Check Boxes </button>

<div class="checkboxes">
  <div class="selection">
    <label><input type="checkbox" class="add" value="5" data-toggle="checkbox"> checkbox 1</label>
  </div><br/>
  <div class="selection">
    <label><input type="checkbox" class="add" value="10" data-toggle="checkbox"> checkbox 2</label>
  </div><br/>
  <div class="selection">
    <label><input type="checkbox" class="add" value="15" data-toggle="checkbox">checkbox 3</label>
  </div>

  <input type="text" id="sum">
</div>