添加复选框值显示时不对隐藏的`div`起作用

问题描述 投票:4回答:1

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

下面给出的脚本工作正常。但它没有使用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;
      } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onClick="showCheckboxes()"> show Check Boxes </button>

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

    
javascript jquery
1个回答
0
投票

如果要在显示复选框时自动选中,请在show函数中添加以下内容:

$('.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>
© www.soinside.com 2019 - 2024. All rights reserved.