Question

我有一个'父'<div>和'子'div，点击父<div>后显示。所有div都有<checkboxes>和<input>来放置数量。

父{4}}检查至少检查了一个孩子<checkbox>。

当选中/取消选中子<checkbox>时，<checkbox>中的数量会自动更改为“1”或“”。

父级数量<input>已停用，并且应显示所有子级数量的总和。

我有两个问题。

首先，当您自己输入数量时，求和脚本工作正常，但是当数量出现/消失时（在检查/取消选中子项<input>之后），求和脚本不会对此类更改做出反应。

其次，当取消选中所有子复选框时，我无法取消选中父<checkbox>。但是我假设如果求和脚本将开始正常工作，我将能够将父<checkbox>绑定为<checkbox>

HTML：

(if (sum> 0){ $('#checkbox0').prop('checked', true);}else{$('#checkbox0').prop('checked', false);}

的CSS：

    <div class="divCell" id="click1">
    <div class="checkbox_div" style='pointer-events:none;'>
      <input type="checkbox" id="checkbox0">
    </div>   
    <div class="div_name_divcell">Parent - click to open</div>
    <div class="div_quantity_divcell">
    <input type="text" name="parent_1" class="quantity_class_parent_1" id="quantity_parent_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)" disabled="disabled">
   </div>
</div>
<div id="hidden1" style="display: none;">
 <div class="divCell" id="child_click1">
    <div class="checkbox_div">
      <input type="checkbox" id="checkbox1">
    </div>   
    <div class="div_name_divcell">Child1</div>
    <div class="div_quantity_divcell">
      <input type="text" name="child_1" class="quantity_class_child" id="quantity_child_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
   </div>
 </div>

  <div class="divCell" id="child_click2">
    <div class="checkbox_div">
      <input type="checkbox" id="checkbox2">
    </div>   
    <div class="div_name_divcell">Child2</div>
    <div class="div_quantity_divcell">
      <input type="text" name="child_1" class="quantity_class_child" id="quantity_child_2" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
   </div>
 </div>
</div>

JavaScript的：

.divCell {width: 500px;height: 35px;margin: 2px 0;display: inline-block;background-color: #D4F78F;}
.div_quantity_divcell{float:right; padding:9px 1px 0 0}
.checkbox_div {width: 25px;position: relative;margin: 5px;float: left;}
.div_name_divcell {line-height: 35px;width: auto;float: left;}

JSFiddle：https://jsfiddle.net/mamzj4tw/6/

Answer 1

这是您的版本的更新版本

https://jsfiddle.net/mamzj4tw/13/

它使用each()来更好地（和清理）向输入添加操作。

您可以创建do-sum等自定义事件，并在需要时触发。在这种情况下，我定义了总和在执行时执行 $(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();。

Answer 2

好的，这是你可以做的事情，

首先，当您自己输入数量时，求和脚本工作正常，但是当数量出现/消失时（在检查/取消选中子项后），求和脚本不会对此类更改作出反应。

如果您正在设置/更改javascript中的值，则不会触发更改事件。为此，您可以手动调用change事件以触发效果。或者，为求和计算创建一个单独的函数，并在取消选中复选框的事件时调用它。

例如

<强>要么

$('#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); }

现在是第二部分，

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

只需在求和过程中检查已选中输入框的长度，如果长度为零，则取消选中它。

希望这会对你有所帮助。

Answer 3

您的代码有点复杂，所以我重写了您尝试归档的内容（没有css部分）。 fiddle here

三个小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

Answer 4

您可以添加新元素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); });
});

Javascript - 在汇总不同输入后选中/取消选中复选框

4 个答案: