javascript - 如何控制表单中的输入值

Question

我正在用一种形式进行估计，即计算每个值以了解每个组的小计和所有组的总计。

功能正常，值已正确添加到总计(小计)中。但是，当取消选中父级输入时，其子级值仍保留在总计(小计)中。它应该从总计(小计)中减少子项值。

[输入嵌套规范]当单选/复选框(名为父级)中有另一个单选/复选框(名为子级)时，1. child 默认禁用。2.当其父级被选中时，可以选择子级。3.当其父级未选中时，子级会再次更改为禁用。

我认为我需要组合这些脚本，但不知道如何组合。如果您知道怎么做，请帮忙。

脚本

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>

Answer 1

将 onAmountUpdate() 添加到最后一个函数(启用或禁用输入字段的函数)的末尾，它可以在 if 语句之后再次更新总计