Я хотел бы зациклить оператор if, который является этой строкой 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>
