Uncheck checkbox on button press without resetting form

Question

I've got a button which I want to reset three form inputs.

I've managed to clear the two text inputs (input 1 and input 2) but the checkbox won't clear.

<button  id="reset">reset</button>

Here is my script:

<script type="text/javascript">
document.getElementById('reset').onclick= function() {
    var field= document.getElementById('textbox1');
    field.value= field.defaultValue;
    var field= document.getElementById('textbox2');
    field.value= field.defaultValue;
    var field= document.getElementById('agreecheckbox');
    field.value= field.defaultValue;
};
</script>

Possible duplicate of [Check/Uncheck checkbox with JavaScript?](https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript) — Kos, Jan 20 '18 at 15:23
If the type of a button is undefined it behaves like a submit button — Andreas, Jan 20 '18 at 15:24
@Kos should probably have said I have tried $("#agreecheckbox").prop("checked", false); too — gjames, Jan 20 '18 at 15:25

Jonny · Answer 1 · 2018-01-20T18:03:33.317

This is the structure you need. I added the onclick directly on the button and created a function(myFunctionName). I added a form around your button and checkbox because we are processing form data. THen check to see if the checkbox is checked with this method. if not it sets checked as empty.

CSS

function myFunctionName(){
if(document.getElementById('agreecheckbox').checked  == true){
document.getElementById('agreecheckbox').checked = '';
var field= document.getElementById('textbox1');
field.value= field.defaultValue;
var field= document.getElementById('textbox2');
field.value= field.defaultValue;
}}

HTML

<form id="formName" method="post">
<button onclick="myFunctionName();" type="button"  id="reset">reset</button>
<input type="checkbox" checked="" id="agreecheckbox">
</form>

score 0 · Answer 2 · edited Jan 20 '18 at 15:56

0

Try doing like this

document.getElementById("agreecheckbox").checked = false;

edited Jan 20 '18 at 15:56

jasinth premkumar

1,430
1
12
22

answered Jan 20 '18 at 15:27

nitte93

1,820
3
26
42

score 0 · Answer 3 · edited Jan 20 '18 at 16:14

This is a simple example to reset checkbox with jquery. This Solutions checks if the id reset has been clicked, if so removes the checked attribute from the checkbox id.

$(function(){
$("#reset").click(function(){
   $("#chkbox").removeAttr('checked');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="reset">reset</button>
<input id=chkbox type=checkbox checked>

score 0 · Answer 4 · edited Jan 20 '18 at 16:31

0

try changing to

var field= document.getElementById('agreecheckbox');
field.checked= false;

We are setting the checkbox property checked to false.
If you want to change it to true, you can set field.checked=true;

edited Jan 20 '18 at 16:31

JimHawkins

4,843
8
35
55

answered Jan 20 '18 at 16:05

Johnson Samuel

2,046
2
18
29

cauchy · Answer 5 · 2018-01-20T15:39:57.100

-1

document.getElementById('reset').onclick= function() {
    var field= document.getElementById('agreecheckbox');
    field.checked= field.defaultValue;
};

<input id="agreecheckbox" type="checkbox">
<button  id="reset">reset</button>

edited Jan 20 '18 at 15:39

answered Jan 20 '18 at 15:27

cauchy

1,123
1
9
19

@gjames please check. – cauchy Jan 20 '18 at 15:40
This code doesn't work alone where is the rest of it? – Jonny Jan 20 '18 at 16:00
@Jonny problem was related to not able to reset checkbox value on click of reset. My solution gives idea for it which can be used to implement complete solution. – cauchy Jan 20 '18 at 16:35
we should explain our code to the user at stackovewrflow, this is to help people learn. and what is field.defaultValue shouldn't it be "checked" or ""? defaultValue doesnt exist. That is why it doesnt work. – Jonny Jan 20 '18 at 16:40
Ok. I should have included that I agree. – cauchy Jan 20 '18 at 16:43

Uncheck checkbox on button press without resetting form

5 Answers5