我有一个小html form
,有三个复选框,每个row
一个。我想在用户取消选中该框时显示javascript confirm box
,然后如果用户选择取消,则checkbox
仍然会被选中。我搜索过这个网站和其他一些网站,但几乎所有内容都与checkbox
被检查有关,就像他们必须同意某些条款或内容一样。我对Javascript
很新,但我尝试根据我应该看起来的样子制作一个函数,但它不起作用。
这是我的表格:
<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>
这是我尝试的功能,但不起作用:
function cTrig(name) {
if (name.checked == true) {
confirm("Are you sure you want to do this?");
return true;
} else {
return false;
}
}
这是jsfiddle
我更喜欢Javascript
中的某些内容,因为我希望在进入jquery
之前更熟悉该语言,但如果必须在jquery
中完成,那就没问题了。欢呼声。
答案 0 :(得分:5)
尝试这种方式
<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>
使用元素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;
}
}
使用姓名
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;
}
}
答案 1 :(得分:4)
我会这样做:
您的表格:
<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>
javascript:
function cTrig(box) {
if (!box.checked) {
if (!confirm("Are you sure you want to do this?")) {
box.checked = true;
}
}
}
答案 2 :(得分:1)
使用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);
}
}
});
此外,您还假设您为每个复选框分配了一个ID,您需要这样做。在这种情况下,名称不会删除它。
<input type="checkbox" id="check1" name="check1" checked="checked"></input>
等...
请注意,我采用原生方式进行确认对话,但使用jQuery UI您可以更多地控制该框。
编辑:添加了一项检查,以确保它只在您取消选中时才会发生。错过了那一部分。 (请注意,检查是否为false,因为当更改事件触发时,更改已经发生)