$(document).ready(function() { //设置初始状态。$('#textbox1').val($(this).is(':checked')); $('#checkbox1').change (function() { $('#textbox1').val($(this).is(':checked')); }); $('#checkbox1').click(function() { if (!$ (this).is(':checked')) { return confirm("你确定吗?"); } }); });
此处 .change()
使用复选框状态更新文本框值。我使用 .click()
确认取消选中的操作。如果用户选择取消,复选标记将恢复,但 .change()
在确认之前触发。
这会使事情处于不一致的状态,并且在选中复选框时文本框会显示为 false。
如何处理取消并保持文本框值与检查状态一致?
在 JSFiddle 中进行了测试,可以满足您的要求。这种方法具有在单击与复选框关联的标签时触发的额外好处。
更新答案:
$(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);
});
});
原答案:
$(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'));
});
});
演示
使用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 example with 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 example with the latest jQuery 2.x
添加了 jsfiddle 示例和带有可点击复选框标签的 html
好吧..只是为了避免头痛(这里已经过了午夜),我可以想出:
$('#checkbox1').click(function() {
if (!$(this).is(':checked')) {
var ans = confirm("Are you sure?");
$('#textbox1').val(ans);
}
});
希望能帮助到你
迟到的答案,但您也可以使用 on("change")
$('#check').on('change', function() { var checked = this.checked $('span').html(checked.toString()) }); < span>检查我!
给你
html
<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">
JavaScript
<script>
$(document).ready(function () {
$('input[id^="ProductId_"]').click(function () {
if ($(this).prop('checked')) {
// do what you need here
alert("Checked");
}
else {
// do what you need here
alert("Unchecked");
}
});
});
</script>
对我来说,这很好用:
$('#checkboxID').click(function () {
if ($(this).attr('checked')) {
alert('is checked');
} else {
alert('is not checked');
}
})
摆脱 change 事件,而是在 click 事件中更改文本框的值。与其返回确认结果,不如在 var 中捕获它。如果为真,则更改该值。然后返回 var。
单击复选框并检查同一事件循环中的值是问题所在。
尝试这个:
$('#checkbox1').click(function() {
var self = this;
setTimeout(function() {
if (!self.checked) {
var ans = confirm("Are you sure?");
self.checked = ans;
$('#textbox1').val(ans.toString());
}
}, 0);
});
演示:http://jsfiddle.net/mrchief/JsUWv/6/
如果您使用的是 iCheck Jquery,请使用以下代码
$("#CheckBoxId").on('ifChanged', function () {
alert($(this).val());
});
只需使用点击事件我的复选框 id 是 CheckAll
$('#CheckAll').click(function () {
if ($('#CheckAll').is(':checked') == true) {
alert(";)");
}
});
尝试这个
$('#checkbox1').click(function() {
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = sure;
$('#textbox1').val(sure.toString());
}
});
$(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')) {
if(!confirm("Are you sure?"))
{
$("#checkbox1").prop("checked", true);
$('#textbox1').val($(this).is(':checked'));
}
}
});
});
// this works on all browsers.
$(document).ready(function() {
//set initial state.
$('#textbox1').val($(this).is(':checked'));
$('#checkbox1').change(function(e) {
this.checked = $(this).is(":checked") && !!confirm("Are you sure?");
$('#textbox1').val(this.checked);
return true;
});
});
$('#checkbox1').click(function() {
if($(this).is(":checked")) {
var returnVal = confirm("Are you sure?");
$(this).attr("checked", returnVal);
}
$('#textbox1').val($(this).is(':checked'));
});
<div id="check">
<input type="checkbox" id="checkbox1" />
<input type="text" id="textbox1" />
</div>
我不知道为什么每个人都把事情弄得这么复杂。这就是我所做的一切。
if(!$(this).is(":checked")){ console.log("on"); }
按名称获取无线电值
$('input').on('className', function(event){
console.log($(this).attr('name'));
if($(this).attr('name') == "worker")
{
resetAll();
}
});
尝试
checkbox1.onclick= e => { if(!checkbox1.checked) checkbox1.checked = !confirm("你确定吗?"); textbox1.value = checkbox1.checked; }
尝试这个:
let checkbox = document.getElementById('checkboxId');
if (checkbox.checked != true)
{
alert("select checkbox");
}
$("#person_IsCurrentAddressSame").change(function ()
{
debugger
if ($("#person_IsCurrentAddressSame").checked) {
debugger
}
else {
}
})
this.checked
而不是$(this).is(':checked')
要快得多:jsperf.com/prop-vs-ischecked/5this.checked
编写 + 原生 javascript 的时间要短得多,一般来说它可能真的值得使用(除了快 200 到 300 倍之外)。