我有一个代码,可以在选中时将复选框项乘以数字字段。当一个复选框数组中有多个项目时,它只会乘以第一个项目。如何分隔复选框组?是否应该为每个项目创建一个唯一的名称和脚本?
JSFiddle 这里
这是我的 HTML:
<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
<input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span id='total'>0</span></p>
这是脚本
$(document).ready(function () {
var sum = 0;
var qty = 0;
$("input[type=checkbox]").change(function () {
if ($('.1').is(':checked')) {
$('.checked-1').show();
} else {
$('.checked-1').hide();
}
});
$('.qty').bind('keyup mouseup', function () { // if user typed anyting in the Quantity
sum = parseInt($('.1').val()); // get checkbox value and change the data type to int
qty = parseInt($(this).val()); // get Quantity value and change the data type to int
//console.log(sum,qty);
if(sum && qty) { // if the values was not empty
$('#total').text(sum * qty); // show the result in the total element
} else { // if the values was empty
$('#total').val(''); // clear the result textbox
}
});
});
我想在一个复选框数组中有多个项目
<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
<input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span id='total'>0</span></p>
<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
<input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span id='total'>0</span></p>
<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
<input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span id='total'>0</span></p>
当我这样做时,代码出错了。提前感谢!
如果你要重复相同的HTML块,你应该使用类而不是ID(因为ID必须是唯一的),然后使用jQuery的树遍历方法来找到正确的表单元素。
$(document).ready(function() {
var sum = 0;
var qty = 0;
$("input[type=checkbox]").change(function() {
if ($(this).is(':checked')) {
$(this).next('.checked-1').show();
} else {
$(this).next('.checked-1').hide();
}
});
$('.qty').bind('keyup mouseup', function() { // if user typed anyting in the Quantity
sum = parseInt($(this).parent().prev('.1').val()); // get checkbox value and change the data type to int
qty = parseInt($(this).val()); // get Quantity value and change the data type to int
//console.log(sum,qty);
if (sum && qty) { // if the values was not empty
$(this).parent().next('p').find('.total').text(sum * qty); // show the result in the total element
} else { // if the values was empty
$(this).parent().next('p').find('.total').val(''); // clear the result textbox
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
<input type="number" name="product_1_qty[]" id="" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span class='total'>0</span>
</p>
<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
<input type="number" name="product_1_qty[]" id="" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span class='total'>0</span>
</p>