33

I have 2 checkboxes inside a form and both those checkboxes were wrapped inside a form.

For one of form I have added the attribute autocomplete="off".
Below is the code snippet

<!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>

Now my problem here if we check those checkboxes manually and if we press F5, then the checkbox with attribute autocomplete="off" got unchecked. But the checkbox which doesn't have that attribute remains checked. This happens in FireFox 22.

This behavior varies from Browser to Browser.
In IE, both the checkboxes remains checked and in Chrome both the checkboxes were unchecked.

But when I press enter in the address bar, it gets unchecked in all the browsers.

Can someone tell me how to have those checkboxes unchecked always when we press F5?
I am aware that this can be handled through Javascript.

Is there any other html way of handling this?

4

7 回答 7

25

不，简单的 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 侦听器中，然后你应该没问题:)

于 2013-07-19T09:37:32.807 回答
16

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');
于 2015-08-26T14:24:55.247 回答
7

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

 $('#checkbox_id').prop('checked', false);
于 2017-05-10T21:28:46.883 回答
3

一个简单的方法，只有 HTML，没有 javascript，没有 jQuery

<input name="box1" type="hidden"   value="0" />
<input name="box1" type="checkbox" value="1" />
于 2019-06-23T19:02:13.253 回答
2

这是特定于浏览器的行为，是一种让用户更方便地填写表单的方法（例如在遇到错误时重新加载页面并且不会丢失他们刚刚输入的内容）。因此，除了使用 javascript 在页面加载时设置默认值之外，没有确定的方法可以在浏览器中禁用此功能。

当您指定标头时，Firefox 虽然似乎禁用了此功能：

Cache-Control: no-store

看到这个问题。

于 2013-07-19T09:45:02.087 回答
2

想到的一种快速解决方案：-

<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. -->
于 2014-09-20T09:36:21.110 回答
-4

好吧，我猜你可以使用checked="false"。这是不选中复选框的 html 方式。您可以参考http://www.w3schools.com/jsref/dom_obj_checkbox.asp。

于 2014-04-21T12:06:10.813 回答