Javascript -在对不同的输入求和后选中/取消选中复选框

这是您的版本的更新版本

它使用each()来更好地(和清洁)添加动作到输入。

你可以在你想要的时候创建你的自定义事件，比如do-sum和fire。在这个例子中，我定义了求和在什么时候执行$(document).trigger('do-sum');
触发执行和事件。

，我已经设置了一个监听器来执行你的例程:

$(document).on('do-sum', function(){ var sum = 0; $('.quantity_class_child.active').each(function(){ sum += +$(this).val(); }); $('#quantity_parent_1').val(sum); var parentChecked = false; $('#hidden1 input[type="checkbox"]').each(function(i, e){ if($(e).is(':checked')) { parentChecked = true; } }); $('#checkbox0').prop('checked', parentChecked); });

我还使用active类设置有效的输入(并快速求和)。

PS你不需要event.preventDefault();后文档准备事件

好的，这些是你可以做到的，

首先，当您自己输入数量时，求和脚本工作正常，但是当数量本身出现/消失时(在检查/取消检查子元素之后)，求和脚本不会对此类更改做出反应。

事情是改变事件将不会被触发，如果你正在设置/改变从javascript的值。为此，您可以手动调用更改事件来触发该效果。或者，为求和计算创建一个单独的函数，并在复选框的uncheck事件时调用它。

。

$('#checkbox1').click(function() {
    if (this.checked) {
      $('#checkbox0').prop('checked', this.checked);
      $('#quantity_child_1').val('1')
    } else {
      $('#quantity_child_1').val('')
      $(".quantity_class_child").trigger("change");
        //$('#checkbox0').prop('checked', false);
    }
  });

或

$('#checkbox1').click(function() {
    if (this.checked) {
      $('#checkbox0').prop('checked', this.checked);
      $('#quantity_child_1').val('1')
    } else {
      $('#quantity_child_1').val('');
        summation();
    }
  });
function summation(){
  var sum = 0;
  $('.quantity_class_child').each(function() {
    sum += +$(this).val();
  });
  $('#quantity_parent_1').val(sum);
 }

第二部分，

其次，当所有子复选框都未选中时，我无法取消父复选框。

在求和过程中，勾选输入框的长度，如果长度为零，取消勾选。

你的代码有点复杂，所以我重写了你试图存档的内容(没有css部分)。小提琴在

三个HTML小div

<div class="parent" id="parent">
 <span class="input">
  <input type="checkbox" name="parent" value="">
  <label for parent>parent - click to open</label>
  <input type="text" name="sum">
 </span> 
</div>
<div class="child" id="child1">
 <span class="input">
  <input type="checkbox" class="inputCheckbox" name="child1" value="child1">
  <input type="text" class="inputSum" name="sum1">
 </span> 
</div>
<div class="child" id="child2">
 <span class="input">
  <input type="checkbox" class="inputCheckbox" name="child2" value="child2">
  <input type="text" class="inputSum" name="sum2">
 </span> 
</div>

和一点jquery

$('.child').hide(); 
// check if parent checkbox is checked
$('input[name="parent"]').click ( function () { 
  if ( $(this).is(':checked') ) $('.child').show(); else $('.child').hide();
})
// check if childcheckbox is checked , if true trigger keyup and sum
$('.inputCheckbox').on ( 'change', function () {  
 if ( $(this).is(':checked') )  $(this).next().val('1').keyup();
// if not , trigger parent
 if ( ! $('.inputCheckbox').is(':checked')  ) $('input[name="parent"]').click ();  
})
// check if value is entered and sum it on keyup
$('.inputSum').on('keyup', function () {  
 var sum = 0;
 $('.inputSum').each ( function () { sum +=  ( $(this).val() - 0)   })
 $('input[name="sum"]').val(sum)
})

HTH

可以添加新元素https://jsfiddle.net/mamzj4tw/34/

$(document).ready( function() {
    $('.drop-down #checkbox').on('change',function(){
        $(this).closest('.divCell').find('#quantity_child')
        .val(this.checked ? 1:'').trigger('keyup');
    });
    $(document).on('keyup click', '.quantity_class_child', function(){
        $(this).closest('.divCell').find('#checkbox').prop("checked",+$(this).val());
        var sum = 0;
        $('.quantity_class_child').each(function(){sum += +$(this).val()});
        $('#quantity_parent_1').val(sum ||'');
        $('#checkbox0').prop("checked", sum);
    });
    $('#click1').click(function() { $('#hidden1').toggle(500); });
});