2
私は、親を<div>の後に表示する '親' <div>と '子' divを持っています。 数量を入力すると、すべてのdivは<checkboxes>と<input>となります。Javascript - さまざまな入力を合計した後にチェックボックスをオン/オフにします。
親<checkbox>少なくとも1つの子<checkbox>がチェックされているかどうかをチェックします。
子供<checkbox>がチェック/チェックされていない場合、<input>の数量は自動的に '1'または ''に変更されます。
親量<input>は無効になっており、すべての子量の合計を表示することになっています。
私には2つの問題があります。
最初に数量を入力すると合計スクリプトが正常に機能しますが、数量が表示されたり消えたりすると（子チェック/チェックを外した後に<checkbox>）、合計スクリプトはそのような変更に反応しません。
2番目に、すべての子チェックボックスがオフになっている場合、親のチェックボックス<checkbox>のチェックを外すことができませんでした。
<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>
のCss：
.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;}
のJavaScript 私は、加算スクリプトが正常に作業を開始するかどうか、私は合計(if (sum> 0){ $('#checkbox0').prop('checked', true);}else{$('#checkbox0').prop('checked', false);}
HTMLで親<checkbox>を結合することができるであろうと仮定しているが：
$(document).ready(function() {
event.preventDefault();
$('#checkbox1').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
}else{
$('#quantity_child_1').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_1').keyup(function(){
$('#checkbox1').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
//second child
$('#checkbox2').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_2').val('1')
}else{
$('#quantity_child_2').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_2').keyup(function(){
$('#checkbox2').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
});
// suming script
$(document).on('change', '.quantity_class_child', function(){
var sum = 0;
$('.quantity_class_child').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
});
//opening script
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
JSFiddle：https://jsfiddle.net/mamzj4tw/6/