Html 如何在默认情况下始终取消选中复选框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17732704/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:18:20  来源:igfitidea点击:

How to make the checkbox unchecked by default always

htmlcheckbox

提问by Vel

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

我在一个表单中有 2 个复选框,并且这两个复选框都被包裹在一个form.

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

对于其中之一,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>

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.

现在我的问题是如果我们手动检查这些复选框,如果我们按下F5,那么带有属性的复选框将autocomplete="off"被取消选中。但是没有该属性的复选框保持选中状态。这发生在 FireFox 22 中。

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

此行为因浏览器而异。
在 IE 中,两个复选框都保持选中状态,而在 Chrome 中,两个复选框都未选中。

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.

有人可以告诉我如何在我们按下时始终取消选中这些复选框F5吗?
我知道这可以通过 Javascript 处理。

Is there any other html way of handling this?

有没有其他的 html 方式来处理这个问题?

采纳答案by David Fari?a

No, there is no way in simple HTML. Javascript might be your only solution at this time..

不,简单的 HTML 没有办法。Javascript 可能是您此时唯一的解决方案。

Loop through all checkboxes in javascript and set them to unchecked:

循环遍历 javascript 中的所有复选框并将它们设置为未选中:

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

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

wrap it up in a onload listener and you should be fine then :)

将它包装在一个 onload 监听器中,然后你应该没问题:)

回答by Guest

jQuery

jQuery

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

Or

或者

<!-- 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');

回答by Ilker Baltaci

If you have a checkbox with an id checkbox_id.You can set its state with JS with prop('checked', false)or prop('checked', true)

如果您有一个带有 id checkbox_id 的复选框。您可以使用 JSprop('checked', false)prop('checked', true)

 $('#checkbox_id').prop('checked', false);

回答by Bappaditya

One quick solution that came to mind :-

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

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

回答by Ann

An easy way , only HTML, no javascript, no jQuery

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

<input name="box1" type="hidden"   value="0" />
<input name="box1" type="checkbox" value="1" />

回答by Mel

This is browser specific behavior and is a way for making filling up forms more convenient to users (like reloading the page when an error has been encountered and not losing what they just typed). So there is no sure way to disable this across browsers short of setting the default values on page load using javascript.

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

Firefox though seems to disable this feature when you specify the header:

当您指定标题时,Firefox 似乎禁用了此功能:

Cache-Control: no-store

See this question.

看到这个问题

回答by user2237777

Well I guess you can use checked="false". That is the html way to leave a checkbox unchecked. You can refer to http://www.w3schools.com/jsref/dom_obj_checkbox.asp.

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