jQuery复选框更改并单击事件
我有
<input type="checkbox" id="checkbox1" /> <br />
<input type="text" id="textbox1" />
和
$(document).ready(function() {
//set initial state.
$('#textbox1').val($(this).is(':checked'));
$('#checkbox1').change(function() {
$('#textbox1').val($(this).is(':checked'));
});
$('#checkbox1').click(function() {
if (!$(this).is(':checked')) {
return confirm("Are you sure?");
}
});
});
JSFIDDLE链接
这里更改后的事件使用复选框状态更新文本框的值。 我使用click事件来确认取消选中的操作。 如果用户选择取消，则复选标记将被恢复，但更改甚至会在确认事件处于不一致状态之前触发（当复选框被选中时，文本框显示为false）。 我该如何处理取消并保持文本框的值与校验状态一致？
那么我没有看到与我的匹配的答案，所以我会发布这个。 在JSFiddle中测试并执行您要求的功能。当单击与复选框关联的标签时，此方法具有额外的优势。
原始答案：
$(document).ready(function() {
//set initial state.
$('#textbox1').val($(this).is(':checked'));
$('#checkbox1').change(function() {
if($(this).is(":checked")) {
var returnVal = confirm("Are you sure?");
$(this).attr("checked", returnVal);
}
$('#textbox1').val($(this).is(':checked'));
});
});
已更新答案：
$(document).ready(function() {
//set initial state.
$('#textbox1').val(this.checked);
$('#checkbox1').change(function() {
if(this.checked) {
var returnVal = confirm("Are you sure?");
$(this).prop("checked", returnVal);
}
$('#textbox1').val(this.checked);
});
});
演示
使用mousedown
$('#checkbox1').mousedown(function() {
if (!$(this).is(':checked')) {
this.checked = confirm("Are you sure?");
$(this).trigger("change");
}
});
如果您使用<label for="cbId">cb name</label> ，则大多数答案都无法捕获（假定）。 这意味着当你点击标签时，它会选中该框而不是直接点击复选框。 （不完全是问题，但各种搜索结果倾向于来这里）
<div id="OuterDivOrBody">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Checkbox label</label>
<br />
<br />
The confirm result:
<input type="text" id="textbox1" />
</div>
在这种情况下，您可以使用：
Earlier versions of jQuery:
$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
// From the other examples
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = !sure;
$('#textbox1').val(sure.toString());
}
});
JSFiddle示例与jQuery 1.6.4
jQuery 1.7+
$('#checkbox1').on('change', function() {
// From the other examples
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = !sure;
$('#textbox1').val(sure.toString());
}
});
JSFiddle最新的jQuery 2.x示例