如何控制表格中的输入值 [英] How to controll input value in form

问题描述

我正在用以下形式进行估算:计算每个值以了解每个组的小计和总计.

I'm making an estimate with form which is that calculating each value to know subtotal from each group and total of all.

该功能正常，将值正确添加到总计(小计)中. 但是，当取消选择父项输入时，其子项值将保留在合计(小计)中. 应该从合计(小计)中减少子代的价值.

Function works ok, values are added correctly in total(subtotal). However, when uncheking parent input, its children values stay in total(subtotal). It should reduce the children value from total(subtotal).

[输入巢状说明] 当单选框/复选框(命名为父级)中有另一个单选框/复选框(命名为子级)时， 1.children在defalut中被禁用. 2.children可以在选中父项时选择. 3.当孩子的父母没有受到抚养时，他们的孩子又变成了残疾人.

[input nest specification] when radio/checkbox(named parent) has another radio/checkbox(named children) in it, 1.childern are disabled in defalut. 2.children can be selected when it's parent is checked. 3.children change to disabled again when it's parent is uncheked.

我认为我需要组合这些脚本，但不知道如何. 如果您知道如何，请提供帮助.

I think I need to combine those scripts but don't know how. If you know how, please help.

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>

推荐答案

在最后一个函数(启用或禁用输入字段的函数)的末尾添加onAmountUpdate()，它会在if之后重新更新总数声明

add onAmountUpdate() to the end of the last function(the one which enables or disables the input fields) it works to update the total again, after the if statement

这篇关于如何控制表格中的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！