复选框。当另一个复选框"触发"时,change()事件不会触发
-
21-12-2019 - |
题
我正在使用复选框来检查表中的所有其他复选框。
在表内检查复选框(更改时)后,我总结了同一个tr中的每个文本框值。
它在Firefox和Chrome上运行良好。
在IE11及更低版本(对我来说,它在每个浏览器中工作很重要),"all"复选框的第一次更改只是勾选其他复选框,但不会总结文本框的值。
在第二次点击,他总结,但取消复选框。
所以它以错误的方式工作,因为第一个"变化"被忽略或sth。
对不起,我的英语不好,描述不好。
<thead>
<tr>
<th>Auswahl <input type="checkbox" id="allcheck" /></th>
<th>Kunden-Nr.</th>
<th>Personal-Nr.</th>
<th>Vorname</th>
<th>Name</th>
<th>Gutscheintyp</th>
<th>Betrag €</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="left">1</td>
<td align="left">2</td>
<td align="left">3</td>
<td align="left">4</td>
<td align="left" class="typ">5</td>
<td align="center" class="texttd">
<input type="text" class="txt" maxlength="5" onclick="this.select()" value="20.00" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th colspan="1"">Summe</th>
<th colspan="1" id="sum">0,00</th>
</tr>
</tfoot>
allcheck是复选框的id,检查所有其他复选框。:)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('input[type="checkbox"]').change(function() {
var sum = 0.00;
$("table tr td input:checked").each(function(){
test = $(this).closest('tr').find('input[type="text"]').val();
test = test.replace( ",",".");
if (isNaN(test)) {
sum = 0.00;
}
sum += parseFloat(test, 10);
$("#sum").html(sum.toString().replace(".",","));
});
sum = parseFloat(sum, 10);
sum = sum.toFixed(2);
$("#sum").html(sum.toString().replace(".",","));
});
我希望这些信息足以让你对我有所帮助。:)
解决方案
似乎更改“已选中”属性并不总是触发“更改”事件。
所以你必须将你的总计计算成单独的函数,并在“#allcheck”单击handler
中明确调用它(也清除了您的代码)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
updateSum();
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('tbody input[type="checkbox"]').change(updateSum);
function updateSum() {
var sum = 0.00;
$("tbody input:checked").each(function(){
var test = $(this).closest('tr').find('input[type="text"]').val();
var testNum = parseFloat(test.replace( ",", "."));
if (!isNaN(testNum)) {
sum += testNum;
}
});
$("#sum").text(sum.toFixed(2).replace(".",","));
}
.
其他提示
而不是 click
事件使用 change
所有检查checkbox的事件。更改将在更改为新值后触发 this.checked
会给你正确的价值 :
$('#allcheck').change(function() {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});
不隶属于 StackOverflow