下面是我的工作代码,但唯一的问题是,我希望默认情况下选中复选框并在页面加载时显示jquery输出,但是当我重新选中复选框时它只显示输出。
$(function() {
$defaultValue = $('#total').val();
$("input[type=checkbox]").click(function(event) {
var total = 0;
$("input:checked").each(function() {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('#total').val($defaultValue);
} else {
$('#total').val('$' + total);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="invoice">
<input type="checkbox" checked='checked' value="1" />
<span class="inv-total">$100</span>
</div>
<input type="text" id="total" value="$90" />
答案 0 :(得分:1)
试试这个:
$(function() {
var total = 0;
$defaultValue = $('#total').val();
checkCheckboxes();
$("input[type=checkbox]").click(function(event) {
checkCheckboxes();
})
function checkCheckboxes() {
total = 0;
$("input:checked").each(function() {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('#total').val($defaultValue);
} else {
$('#total').val('$' + total);
}
});
}
答案 1 :(得分:0)
您可以使用.trigger('click')
两次取消选中并选中复选框:
$(function() {
$defaultValue = $('#total').val();
$("input[type=checkbox]").click(function(event) {
var total = 0;
$("input:checked").each(function() {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('#total').val($defaultValue);
} else {
$('#total').val('$' + total);
}
}).trigger('click').trigger('click');
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="invoice">
<input type="checkbox" checked='checked' value="1" />
<span class="inv-total">$100</span>
</div>
<input type="text" id="total" value="$90" />
&#13;