关于javascript：jQuery复选框更改和单击事件

jQuery checkbox change and click event

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(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?");
}
});
});

1
2
3

这里，.change()使用复选框状态更新文本框值。我用.click()确认取消选中的操作。如果用户选择"取消"，则会恢复选中标记，但确认前会触发.change()。

这会使事情处于不一致的状态，选中复选框时，文本框会显示"假"。

如何处理取消并保持文本框值与复选状态一致？

相关讨论

好吧，我看不到与我的答案匹配的答案，所以我会发布这个。在jsFiddle中测试并执行您所要求的操作。当单击与复选框关联的标签时，这种方法还有一个额外的好处，那就是触发。

原始答案：

1
2
3
4
5
6
7
8
9
10
11
12

$(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'));
});
});

更新答案：

1
2
3
4
5
6
7
8
9
10
11
12

$(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。

1
2
3
4
5
6

$('#checkbox1').mousedown(function() {
if (!$(this).is(':checked')) {
this.checked = confirm("Are you sure?");
$(this).trigger("change");
}
});

相关讨论

它会在检查时显示警报，并始终阻止我实际检查。这是铬合金的。
与@pimvdm相同。即使选中操作也会弹出确认(只会弹出取消选中)，选择"确定"不会导致选中该框。
@约瑟夫：谢谢编辑，但文本框没有改变。
哦！文本框？这不是主要问题：p
@约瑟夫向埃多克斯1〔0〕确认了。是否可以更改，以便取消选中？
好的，upvote:)虽然现在使用键盘检查是确认的一个解决方法。
@其他人可以：jfiddle.net/4dqxv/4
它在使用鼠标时工作，但如果用键盘检查，则不工作。
@frinux这很简单，因为这是一个与鼠标相关的问题。请不要因为答案与完全不同的问题的相关性而对其投反对票。如果您在通过键盘进行复选框检查后触发指示器状态时遇到问题，请发布有关该问题的问题，而不是漫不经心地否决答案。
约瑟夫，你知道这个解决方案是否适用于盲人访问网页吗？在另一个上下文中，我被告知要远离鼠标事件，因为这会使盲人难以使用页面。
@不幸的是，卡德加一世并不是这方面的专家，但我冒昧地猜测，这不是一个很好的解决方案。我不知道屏幕阅读器是如何处理表单的。我想他们会使用键盘空格键来选择或取消选择复选框，在这种情况下，我会说要么使用一个键控事件，要么更好地忽略这个问题，并将其保留在已更改的事件中。这里的问题是，在您确认或取消之前，复选框中的复选框被选中。这种美学对于使用屏幕阅读器的人来说并不重要。
选择带有标签的复选框时，我们要做什么？ click</label>
@vivekvikranth您可以将相同的事件添加到标签中。当事件被触发时，您可以想象并确定适当的单选按钮，但为了演示目的，这里有一个简单的示例：jsfiddle.net/4dqxv/888
因为mousedown不是用户与复选框交互的唯一方式，所以被否决。

如果你使用cb name的话，大多数答案(大概)都无法理解。这意味着当您单击标签时，它将选中该框，而不是直接单击该复选框。(不完全是问题，但各种搜索结果往往会出现在这里)

1
2
3
4
5
6

<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Checkbox label</label>
<br />
<br />
The confirm result:
<input type="text" id="textbox1" />

在这种情况下，您可以使用：

Earlier versions of jQuery:

1
2
3
4
5
6
7
8

$('#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());
}
});

jquery 1.6.4的jfiddle示例

jQuery 1.7+

1
2
3
4
5
6
7
8

$('#checkbox1').on('change', function() {
// From the other examples
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = !sure;
$('#textbox1').val(sure.toString());
}
});

最新jquery 2.x的jfiddle示例

添加了JSfiddle示例和带有可单击复选框标签的HTML

相关讨论

好。。为了避免头痛(这里已经过了午夜)，我可以想出：

1
2
3
4
5
6

$('#checkbox1').click(function() {
if (!$(this).is(':checked')) {
var ans = confirm("Are you sure?");
$('#textbox1').val(ans);
}
});

希望它有帮助

对我来说，这很有效：

1
2
3
4
5
6
7

$('#checkboxID').click(function () {
if ($(this).attr('checked')) {
alert('is checked');
} else {
alert('is not checked');
}
})

相关讨论

给你

HTML

1	<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(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");
}
});

});

如果您使用的是icheck jquery，请使用以下代码

1
2
3

$("#CheckBoxId").on('ifChanged', function () {
alert($(this).val());
});

相关讨论

去掉更改事件，改为更改Click事件中文本框的值。不要返回确认的结果，而是在变量中捕获它。如果它为真，则更改该值。然后返回变量。

复选框单击并检查同一事件循环中的值是问题所在。

试试这个：

1
2
3
4
5
6
7
8
9
10
11

$('#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/jsuvv/6/

试试这个

1
2
3
4
5
6
7

$('#checkbox1').click(function() {
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = sure;
$('#textbox1').val(sure.toString());
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1
2
3
4
5
6
7
8
9
10
11
12

// 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;
});
});

1
2
3
4
5
6
7
8
9
10
11
12

$('#checkbox1').click(function() {
if($(this).is(":checked")) {
var returnVal = confirm("Are you sure?");
$(this).attr("checked", returnVal);
}
$('#textbox1').val($(this).is(':checked'));
});

<input type="checkbox" id="checkbox1" />
<input type="text" id="textbox1" />

按名称获取无线值

1
2
3
4
5
6
7

$('input').on('className', function(event){
console.log($(this).attr('name'));
if($(this).attr('name') =="worker")
{
resetAll();
}
});

我不知道为什么每个人都把这件事搞得这么复杂。这就是我所做的。

1	if(!$(this).is(":checked")){ console.log("on"); }

只需使用点击事件我的复选框ID是checkall

1
2
3
4
5
6
7

$('#CheckAll').click(function () {

if ($('#CheckAll').is(':checked') == true) {

alert(";)");
}
}

回答迟了，但你也可以使用on.("change")。

1
2
3
4

$('#check').on('change', function() {
var checked = this.checked
$('span').html(checked.toString())
});

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <input type="checkbox" id="check"> <span>Check me!</span>