Я делаю оценку с помощью формы, которая заключается в том, что я вычисляю каждое значение, чтобы узнать промежуточный итог из каждой группы и общее количество всех.
Функция работает нормально, значения добавляются правильно в общем количестве (промежуточный итог).Однако при снятии отметки с родительского ввода его дочерние значения остаются в сумме (промежуточный итог).Это должно уменьшить значение потомков от общего (подытог).
[спецификация входного гнезда], когда радио / флажок (именованный родительский) имеет другое радио / флажок (именованные дочерние элементы), 1.childern отключены в defalut,2. дети могут быть выбраны, когда его родитель проверен.3. дети снова становятся неактивными, когда их родитель не отмечен.
Я думаю, что мне нужно объединить эти сценарии, но я не знаю, как.Если вы знаете, как, пожалуйста, помогите.
script
var subTotal, total;
$(function() {
$('input.value, input.pages').unbind('change');
$('input.value, input.pages').bind('change', function(){
onAmountUpdate();
});
});
function onAmountUpdate(){
total = 0;
$('.category').each(function(){
subTotal = 0;
$(this).find('input[type="checkbox"]:checked, input[type="radio"]:checked').each(function(){
if($(this).hasClass('aaa')) {
subTotal += Number($(this).val()) * Number($(this).next().val());
}else{
subTotal += Number($(this).val());
}
});
$(this).find('.xxx').val(subTotal);
total += subTotal;
});
$('.zzz').val(total);
}
$(function(){
$('.category').each(function(){
var category = this;
//デフォルト children選択不可
$('input[name="children"]').prop('checked', false).prop('disabled', true);
$(this).find('input[name="parent"]').change(function(){
//parentがチェックされたら直下のchildrenのみチェック可
if ($('input[name="parent"]', category).prop("checked")) {
$('input[name="children"]' , category).prop('disabled', false);
} else {
$('input[name="children"]', category).prop('checked', false).prop('disabled', true);
}
});
});
});
html
<form action="">
<div class="category">
[Group-A]
<label><input type="checkbox" class="value" value="100">100</label>
<label><input type="checkbox" class="value" value="200">200</label>
<label><input type="checkbox" class="value" value="300">300</label>
<label>
<input type="checkbox" name="parent" class="aaa" value="100">multiple pages:100×
<input type="text" name="children" value="children" class="pages">pages
</label> [Subtotal]
<input type="text" class="xxx" value="0">
</div>
<div class="category">
[Group-B]
<label><input type="radio" class="value" value="100">100</label>
<label><input type="radio" class="value" value="200">200</label>
<label><input type="radio" class="value" value="300">300</label>
<label>
<input type="checkbox" name="parent" class="aaa" value="200">multiple pages:200×
<input type="text" name="children" value="children" class="pages">pages
</label> [Subtotal]
<input type="text" class="xxx" value="0">
</div>
<div class="category">
[Group-C]
<label><input type="radio" value="0" name="parent" class="parent">Yes</label>
<ul>
<li><label><input type="radio" class="value children" value="100" name="children">100 children</label></li>
<li><label><input type="radio" class="value children" value="200" name="children">200 children</label></li>
<li><label><input type="radio" class="value children" value="300" name="children">300 children</label></li>
</ul>
<label><input type="radio" value="0" name="parent" class="parent">No</label>
[Subtotal]<input type="text" class="xxx" value="0">
</div>
Total:<input type="text" class="zzz" value="0">
</form>