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?
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)
$('#checkbox_id').prop('checked', false);
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.
Firefox though seems to disable this feature when you specify the header:
Cache-Control: no-store
See this question.
An easy way , only HTML, no javascript, no jQuery
<input name="box1" type="hidden" value="0" />
<input name="box1" type="checkbox" value="1" />
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');
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;"> </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. -->
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.
Source: Stackoverflow.com