logo标签列表

如何使复选框默认情况下始终取消选中。

javascripthtmlcheckbox
36

我在一个表单中放置了两个复选框，这两个复选框都被包含在一个 form 中。

对于其中的一个 form，我添加了属性 autocomplete="off"。
以下是代码片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
        <form name="chkBoxForm" >
            <div>
                <input type="checkbox" value="100" name="product"/>My Checkbox1
            </div>
        </form>
        <form name="chkBoxForm" autocomplete="off">
            <div>
                <input type="checkbox" value="200" name="product"/>My Checkbox2                         
            </div>
        </form>
    </body>
</html>

现在的问题是，如果我们手动勾选这些复选框，并按下F5，那么带有属性autocomplete="off"的复选框会被取消勾选，但是没有该属性的复选框仍然保持勾选状态。这种情况发生在FireFox 22浏览器中。

这种行为因浏览器而异。
在IE中，两个复选框都保持勾选状态，在Chrome中，两个复选框都不被勾选。

但是当我在地址栏中按Enter键时，所有浏览器中的复选框都会被取消勾选。

是否有人能告诉我如何让这些复选框在我们按下F5时始终处于未勾选状态？
我知道可以通过JavaScript来处理这个问题。

还有其他处理方式吗？

3
为什么重新加载页面后复选框仍然保持选中状态？ - Maxim Zhukov
1
这个HTML表单运行在什么上下文中？我的意思是，这是用于ASP.NET应用程序还是其他什么东西？据我所知，当您重新加载页面时，除非您有一个cookie或视图状态，否则复选框将恢复到其默认状态。 - Zack
也许行为上的差异是因为按下回车键被视为新的页面加载，而按下F5被视为重新加载？ - Zack
@Zack 是的，那就是原因。 - t.niese
@YuriyGalanter 没有反对JavaScript。自从我意识到了那个解决方案，我只是想知道是否可以通过HTML本身完成任何操作。 - Vel
显示剩余3条评论
9个回答
27

不，简单的HTML中没有这种方法。目前JavaScript可能是您唯一的解决方案。

在JavaScript中循环遍历所有输入框，检查它们是否确实是复选框并将它们设置为未选中：

var inputs = document.getElementsByTagName('input');

for (var i=0; i<inputs.length; i++)  {
  if (inputs[i].type == 'checkbox')   {
    inputs[i].checked = false;
  }
}

把它包裹在onload监听器中，那么你就没问题了 :)

18

jQuery < 1.6

jQuery

$('input[type=checkbox]').removeAttr('checked');

或者

<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/> 

<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/> 
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/> 

$('input.inputUncheck').removeAttr('checked');

jQuery >= 1.6（由Wilfred Hughes指出）

jQuery

$('input[type=checkbox]').prop('checked', false);

或者
<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/> 

<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/> 
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/> 

$('input.inputUncheck').prop('checked', false);
4
从 jQuery 1.6 开始，应该使用 .prop('checked', false)。 - Wilfred Hughes
8

如果您有一个带有id checkbox_id 的复选框，在JS中可以使用 prop('checked', false) 或 prop('checked', true) 来设置它的状态

$('#checkbox_id').prop('checked', false);
3
请问您能否在您的回答中增加一些更多的上下文信息呢？仅有代码的回答很难理解。如果您能在帖子中添加更多信息，将有助于提问者和未来的读者。 - RBT
3
一种简单的方法，只需要HTML，没有javascript或jQuery。
<input name="box1" type="hidden"   value="0" />
<input name="box1" type="checkbox" value="1" />
3

我想到了一个快速的解决方案：-


<input type="checkbox" id="markitem" name="markitem" value="1" onchange="GetMarkedItems(1)">
<label for="markitem" style="position:absolute; top:1px; left:165px;">&nbsp</label>
<!-- Fire the below javascript everytime the page reloads -->
<script type=text/javascript>
  document.getElementById("markitem").checked = false;
</script>
<!-- Tested on Latest FF, Chrome, Opera and IE. -->
2
这是浏览器特定的行为，可以让用户更方便地填写表单（例如在遇到错误时重新加载页面而不会丢失刚刚输入的内容）。因此，除非使用JavaScript在页面加载时设置默认值，否则无法确定在所有浏览器中禁用此功能。然而，当您指定标题时，Firefox似乎会禁用此功能。
Cache-Control: no-store

请查看此问题。
我认为你所说的那不是一个好的解决方案，如果出现错误，用户必须重新输入所有内容。使用JavaScript可以在不影响输入文本字段的情况下设置所需状态。 - David Fariña
@David 同意。我认为禁用此功能根本不是一个好主意（通过JavaScript或缓存头）。如果用户已更改该值，则很有可能，如果由于某种原因刷新页面，他或她将再次输入相同的值。但这就是OP所要求的。 - Mel
当然可以，但使用JavaScript解决方案时，您仍然可以完全控制要重置的内容。这样，您可以仅重置复选框，而将文本字段保留为原样。 - David Fariña
0

对我来说，使用/>结尾的输入标签会导致复选框默认为未选中状态。仅以>结尾的标签（令人恼火地）似乎无论元素中的checked标志如何，都会默认为选中状态。

示例：

默认未选中

<input type="checkbox" id="myid1" name="checkbox1" />

已选中

<input type="checkbox" id="myid2" name="checkbox2" checked />

另外，仍然选中

<input type="checkbox" id="myid3" name="checkbox3">

再次，仍然选中

<input type="checkbox" id="myid4" name="checkbox4" checked>

0
问题在于HTML输入框可以在页面加载时进行检查，而不需要checked属性。浏览器确实使用了一些额外的与用户相关的缓存，我们无法控制这一点。
使用JavaScript，我们可以强制将checked属性设置为false。 

(() => {(myinput.checked) ? myinput.click() : null})()
<input type=checkbox id="myinput" checked /> Unchecked on load

-4
  1. 链接到w3fools网站。
  2. 这个链接甚至没有给出答案。
 - Cyril Duchon-Doris
3
  1. 复选框的 checked 属性不是那样使用的。
 - user234932
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接