如何在未选中复选框时显示 Javascript 确认框，然后如果用户选择取消，请选中复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14208022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show Javascript confirm box when checkbox is unchecked and then if user selects cancel, leave the checkbox checked?
提问by Andrew Fox
I have a small html formwith three checkboxes, one in each row. I want to have a javascript confirm boxshow when the user unchecks the box, and then if the user selects cancel, the checkboxremains checked. I've searched this site and a few others but almost everything was to do with the checkboxbeing checked, like if they had to agree to some terms or something. I am very new to Javascripthowever I tried to make a function based on what I though it should look like, but it doesn't work.
我有一个html form带有三个复选框的小复选框，每个row. 我想javascript confirm box在用户取消选中该框时进行显示，然后如果用户选择取消，则checkbox保持选中状态。我搜索过这个网站和其他一些网站，但几乎所有的事情都与checkbox被检查有关，比如他们是否必须同意某些条款或其他事情。我很新，Javascript但是我试图根据我认为它应该是什么样子来创建一个函数，但它不起作用。
Here is my form:
这是我的表格：
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name="check1" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" name="check3" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
And here is the function I tried, but doesn't work:
这是我尝试过的功能，但不起作用：
function cTrig(name) {
if (name.checked == true) {
confirm("Are you sure you want to do this?");
return true;
} else {
return false;
}
}
Here is a jsfiddle
这是一个jsfiddle
I would prefer something in Javascriptas I want to become more familiar with that language before getting into jquery, but if it has to be done in jquery, then that is fine. Cheers.
我宁愿什么Javascript，因为我想成为更熟悉进入之前的语言jquery，但是如果它有事情要做jquery，那就是罚款。干杯。
采纳答案by Sibu
Try This Way
试试这个方法
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name ="check1" id="check1" checked='checked' onchange="cTrig('check1')"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" id="check2" checked='checked' onchange="cTrig('check2')"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" id="check3" name="check3" checked='checked' onchange="cTrig('check3')"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
By Using Element Id
通过使用元素 ID
function cTrig(clickedid) {
if (document.getElementById(clickedid).checked == true) {
return false;
} else {
var box= confirm("Are you sure you want to do this?");
if (box==true)
return true;
else
document.getElementById(clickedid).checked = true;
}
}
By Using Name
通过使用名称
function cTrig(clickedid) {
if (document.getElementsByName(clickedid)[0].checked == true) {
return false;
} else {
var box= confirm("Are you sure you want to do this?");
if (box==true)
return true;
else
document.getElementsByName(clickedid)[0].checked = true;
}
}
回答by nisovin
I would do it this way:
我会这样做：
Your form:
您的表格：
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name="check1" checked="checked" onchange="cTrig(this)"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" checked="checked" onchange="cTrig(this)"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" name="check3" checked="checked" onchange="cTrig(this)"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
The javascript:
javascript：
function cTrig(box) {
if (!box.checked) {
if (!confirm("Are you sure you want to do this?")) {
box.checked = true;
}
}
}
回答by Taz
Uses jQuery (because it's just better) but I could whip it up without if needed:
使用 jQuery（因为它更好），但如果需要，我可以不用它：
$('#check1').change(function(){
if($("#check1").prop('checked') == false)
{
var i = window.confirm("Sure?");
if(i == true)
{
$("#check1").prop('checked', false);
}
else
{
$("#check1").prop('checked', true);
}
}
});
This additionally assumes you're assigning each checkbox an id, which you will need to. Name doesn't cut it in this case.
这还假设您为每个复选框分配了一个 id，这是您需要的。在这种情况下，名称不会削减它。
<input type="checkbox" id="check1" name="check1" checked="checked"></input>
etc...
等等...
Note that I went the native way for the confirm dialogue, but using jQuery UIyou can control the box alot more.
请注意，我采用了确认对话框的原生方式，但使用jQuery UI，您可以更多地控制该框。
EDIT: Added a check to make sure it only happens when you're unchecking it. Missed that part. (Note you check for false because when the change event fires the change has already happened)
编辑：添加了一个检查以确保它仅在您取消选中时发生。错过了那部分。（请注意，您检查 false 是因为当更改事件触发时更改已经发生）
