Change checkbox checked with JavaScript

Question

I am trying to change a part of my html code with JavaScript, but I can't get it to work:

function trigger(){
  document.getElementById('mycheckbox').innerHTML="<input type="checkbox" id="mycheckbox" checked>";
}

function triggerOff(){
  document.getElementById('mycheckbox').innerHTML="<input type="checkbox" id="mycheckbox">";
}

<input type="checkbox" id="mycheckbox"> 

<button type="button" onclick="trigger()">test</button>
<button  type="button" onclick="triggerOff()">test</button>

So if I press the button I want to add the checked status to my HTML and if I press the other button I want to remove the checked status. Is this even possible?

All help is highly appreciated ! Thanks a lot guys!

Mamun · Accepted Answer · 2018-10-24 13:58:10Z

6

You cannot set innerHTML to input type checkbox. Use the checked property to check/uncheck the checkbox

function trigger(){
  document.getElementById('mycheckbox').checked = true;
}

function triggerOff(){
  document.getElementById('mycheckbox').checked = false;
}

<input type="checkbox" id="mycheckbox"> 

<button type="button" onclick="trigger()">test</button>
<button  type="button" onclick="triggerOff()">test</button>

edited Oct 24, 2018 at 13:58

answered Oct 24, 2018 at 13:25

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

poza Over a year ago

thanks for the answers! I know that I could do it with .checked= true/false. But I was trying to get the change persistant. So If I reload the page the checked is still there. I don't want to do it with local storage.

Mamun · Accepted Answer · 2018-10-24 14:00:09Z

3

Just do it like that

function trigger(){
  document.getElementById('mycheckbox').checked = true;
}

function triggerOff(){
  document.getElementById('mycheckbox').checked = false;
}

The innerHTML property will create inside your mycheckbox another input element

edited Oct 24, 2018 at 14:00

Mamun

69k9 gold badges51 silver badges62 bronze badges

answered Oct 24, 2018 at 13:23

loliki

9572 gold badges16 silver badges41 bronze badges

Comments

Mamun · Accepted Answer · 2018-10-24 13:59:12Z

2

Use checked property, like this:

function trigger(){
  document.getElementById('mycheckbox').checked=true;
}

function triggerOff(){
  document.getElementById('mycheckbox').checked=false;
}

<input type="checkbox" id="mycheckbox"> 

<button type="button" onclick="trigger()">test</button>
<button  type="button" onclick="triggerOff()">test</button>

edited Oct 24, 2018 at 13:59

Mamun

69k9 gold badges51 silver badges62 bronze badges

answered Oct 24, 2018 at 13:21

Lucas Wieloch

8188 silver badges22 bronze badges

Collectives™ on Stack Overflow

Change checkbox checked with JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related