如何通过if语句，使可用的文本框输入循环？

Question

我想循环，如果声明这是该行if($(this).hasClass('numInput')) {因为多个项目计算在下面的代码无法正常工作。

它应该是这样的：当点击多个项目的复选框，文本框可用来输入。通过输入号码（例如：2）然后检查下面复选框（例如：检查100和200），500（100 * 2 + 200 * 2）示出了在总。

单个任务可以工作，但是检查多个项目会造成麻烦。

试图循环，如果if语句是能够做或者一些其他的想法来修复错误。

var subTotal, total;
$(function() {
  $('input.value, input.pages').off('change');
  $('input.value, input.pages').on('change', function() {
    amountCalc();
  });
});

function amountCalc() {
  total = 0;
  $('.category').each(function() {
    subTotal = 0;
    $(this).find('input[type="checkbox"]:checked, input[type="radio"]:checked').each(function() {
      if ($(this).hasClass('numInput')) {
        var num = parseInt($(this).next().val());
        var itemNest = $(this).closest('.itemNest');
        var array = [];
        $('input[class="value"]:checked', itemNest).each(function() {
          var itemVal = Number($(this).val());
          array.push(itemVal);
        });
        for (var i = 0; i < array.length; i++) {
          subTotal += array[i] * num;
        }
        return false;
      } else {
        subTotal += Number($(this).val());
      }
    });
    $(this).find('.subTotal').val(subTotal);
    total += subTotal;
  });

  $('.total').val(total);
  $('.totalPer130').val(total * 1.3);
  $('.totalPer70').val((total) - (total * 0.3));

}

$(function() {
  $('.category .itemNest').each(function() {
    var itemNest = this;
    //デフォルト　children選択不可
    $('input[name="children"]').prop('checked', false).prop('disabled', true);
    $('.category .itemNest').find('.parent').change(function() {
      //parentのチェック判別
      if ($('.parent', itemNest).prop("checked")) {
        $('input[name="children"]', itemNest).prop('disabled', false);
      } else {
        $('input[name="children"]', itemNest).prop('checked', false).prop('disabled', true);
      }
      amountCalc();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <table class="category">
    <tr>
      <td>
        <div class="itemNest">
          <label><input type="checkbox" class="parent numInput">multiple items:
            <input type="text" name="children" value="0" class="pages">pages</label>
          <ul>
            <li><label><input type="checkbox" class="value" value="100" name="children">100</label></li>
            <li><label><input type="checkbox" class="value" value="200" name="children">200</label></li>
            <li><label><input type="checkbox" class="value" value="300" name="children">300</label></li>
          </ul>
        </div>
        <div class="itemNest">
          <label><input type="checkbox" class="parent numInput">multiple items:
            <input type="text" name="children" value="0" class="pages">pages</label>
          <ul>
            <li><label><input type="checkbox" class="value" value="100" name="children">100</label></li>
            <li><label><input type="checkbox" class="value" value="200" name="children">200</label></li>
            <li><label><input type="checkbox" class="value" value="300" name="children">300</label></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
  <table class="category">
    <tr>
      <td>
        <div class="itemNest">
          <label><input type="checkbox" value="0" class="parent">single item:
            <ul>
              <li><label><input type="checkbox" class="value" value="100" name="children">100</label></li>
          <li><label><input type="checkbox" class="value" value="200" name="children">200</label></li>
          <li><label><input type="checkbox" class="value" value="300" name="children">300</label></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
  <table class="category">
    <tr>
      <td>
        <div class="itemNest">
          <label><input type="radio" value="0" name="parent1" class="parent">single item:</label>
          <ul>
            <li><label><input type="radio" class="value" value="100" name="children">100</label></li>
            <li><label><input type="radio" class="value" value="200" name="children">200</label></li>
            <li><label><input type="radio" class="value" value="300" name="children">300</label></li>
          </ul>
          <label><input type="radio" value="0" name="parent1" class="parent">none</label>
        </div>
      </td>
    </tr>
  </table>

  <table class="output">
    <tr>
      <td><label>Total : <input type="text" class="total" value="0">yen</label></td>
    </tr>
    <tr>
      <td><label>30% extra：<input type="text" class="totalPer130" value="0">yen</label></td>
    </tr>
    <tr>
      <td><label>30% discount：<input type="text" class="totalPer70" value="0">yen</label></td>
    </tr>
    <tr>
      <td><input type="reset" value="リセット"></td>
    </tr>
  </table>
</form>

Answer 1

我诚实地不能确定你的意思是“循环if语句”，但它看起来像你在哪里错了是遍历所有的复选框，然后试图弄清楚这是其在循环中;在return false将阻止任何但是首套自可到达。逻辑会容易得多，如果您使用更具体的选择对于每个循环，而不是试图突破与return false跟随。

下面是这似乎工作你的代码中的注释改写：

var subTotal, total;
$('input.value, input.pages').on('change', amountCalc);

function amountCalc() {
  var total = 0;
  
  // loop over every checked parent, skip the others
  $('.parent:checked').each(function() {
    var container = $(this).closest('.itemNest');

    // you never display the subTotal anywhere, so you could instead just
    // skip that and add to the total at every step; I left it in just in case
    var subTotal = 0;

    // find the "pages" value, or use 1 if it's a "single item" 
    var multiplier;
    if (container.find('.pages').length > 0) {
      // the || 0 prevents NaN input:
      multiplier = Number(container.find('.pages').val()) || 0
    } else {
      multiplier = 1;
    }

    // sum up the checked values within this container
    container.find('.value:checked').each(function() {
      subTotal += (Number($(this).val()) * multiplier)
    })
    total = total + subTotal;
  })

  $('.total').val(total);
  $('.totalPer130').val(total * 1.3);
  $('.totalPer70').val((total) - (total * 0.3));
}

// below code is unchanged from original

$('.category .itemNest').each(function() {
  var itemNest = this;
  //デフォルト　children選択不可
  $('input[name="children"]').prop('checked', false).prop('disabled', true);
  $('.category .itemNest').find('.parent').change(function() {
    //parentのチェック判別
    if ($('.parent', itemNest).prop("checked")) {
      $('input[name="children"]', itemNest).prop('disabled', false);
    } else {
      $('input[name="children"]', itemNest).prop('checked', false).prop('disabled', true);
    }
    amountCalc();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <table class="category">
    <tr>
      <td>
        <div class="itemNest">
          <label><input type="checkbox" class="parent numInput">multiple items:</label>
            <input type="text" name="children" value="0" class="pages">pages
          <ul>
            <li><label><input type="checkbox" class="value" value="100" name="children">100</label></li>
            <li><label><input type="checkbox" class="value" value="200" name="children">200</label></li>
            <li><label><input type="checkbox" class="value" value="300" name="children">300</label></li>
          </ul>
        </div>
        <div class="itemNest">
          <label><input type="checkbox" class="parent numInput">multiple items:</label>
            <input type="text" name="children" value="0" class="pages">pages
          <ul>
            <li><label><input type="checkbox" class="value" value="100" name="children">100</label></li>
            <li><label><input type="checkbox" class="value" value="200" name="children">200</label></li>
            <li><label><input type="checkbox" class="value" value="300" name="children">300</label></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
  <table class="category">
    <tr>
      <td>
        <div class="itemNest">
          <label><input type="checkbox" value="0" class="parent">single item:
            <ul>
              <li><label><input type="checkbox" class="value" value="100" name="children">100</label></li>
          <li><label><input type="checkbox" class="value" value="200" name="children">200</label></li>
          <li><label><input type="checkbox" class="value" value="300" name="children">300</label></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
  <table class="category">
    <tr>
      <td>
        <div class="itemNest">
          <label><input type="radio" value="0" name="parent1" class="parent">single item:</label>
          <ul>
            <li><label><input type="radio" class="value" value="100" name="children">100</label></li>
            <li><label><input type="radio" class="value" value="200" name="children">200</label></li>
            <li><label><input type="radio" class="value" value="300" name="children">300</label></li>
          </ul>
          <label><input type="radio" value="0" name="parent1" class="parent">none</label>
        </div>
      </td>
    </tr>
  </table>

  <table class="output">
    <tr>
      <td><label>Total : <input type="text" class="total" value="0">yen</label></td>
    </tr>
    <tr>
      <td><label>30% extra：<input type="text" class="totalPer130" value="0">yen</label></td>
    </tr>
    <tr>
      <td><label>30% discount：<input type="text" class="totalPer70" value="0">yen</label></td>
    </tr>
    <tr>
      <td><input type="reset" value="リセット"></td>
    </tr>
  </table>
</form>

（注意：我做了一个小改动，HTML，你有一个<label>元素包装既numInput复选框和“页面”输入字段;这意味着在输入栏点击也会无意中切换复选框的值，我感动了该标签元素之外的文本字段。）