Javascript to check a checkbox if an other checkbox is checked

Question

I have 2 checkboxes, consider chk1 and chk2. If one checkbox is checked, the second checkbox should be checked automatically and not viceversa. What should be the javascript? Can someone help me? Thank you!!

@John. That's what I figured, but it could mean he only wants chk2 to be checked automatically and never unchecked automatically. — jordanbtucker
– jordanbtucker, Commented Dec 2, 2010 at 21:13

JohnFx · Accepted Answer · 2010-12-02 21:17:57Z

8

Here's a simple inline version to demonstrate the general idea. You might want to pull it out into a separate function in real world usage.

If you want chk2 to automatically stay in sync with any changes to chk1, but not do anything when chk2 is clicked go with this.

 <input id="chk1" type="checkbox" onclick="document.getElementById('chk2').checked = this.checked;">
 <input id="chk2" type="checkbox">

This version will only change chk2 when chk1 is checked, but not do anything when ck1 is unchecked.

 <input id="chk1" type="checkbox" onclick="if (this.checked) document.getElementById('chk2').checked = true;">
 <input id="chk2" type="checkbox">

edited Dec 2, 2010 at 21:17

answered Dec 2, 2010 at 20:58

JohnFx

35k19 gold badges108 silver badges169 bronze badges

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

2 Comments

Nicole Over a year ago

Good answer since the onclick is important (onchange wouldn't trigger until focus is removed - thought it might be good to put both in case the user uses the space bar? Or does that trigger onclick?)

JohnFx Over a year ago

I did a quick test and the spacebar triggered it in Firefox and IE.

Ali Tarhini · Accepted Answer · 2010-12-02 20:58:55Z

2

var chk1 = document.getElementById('chk1');
var chk2 = document.getElementById('chk2');

if ( chk1.checked )
      chk2.checked = true;

answered Dec 2, 2010 at 20:58

Ali Tarhini

5,3686 gold badges45 silver badges66 bronze badges

1 Comment

JohnFx Over a year ago

This solution will work if you don't want ck2 to UNCHECK when you uncheck ck1. It is a little unclear what the OP wants to happen (if anything) when you uncheck ck1.

Eduardo · Accepted Answer · 2010-12-02 20:59:35Z

1

For the first one:

document.getElementById('chk1').checked = document.getElementById('chk2').checked;

For the second one:

document.getElementById('chk2').checked = document.getElementById('chk1').checked;

answered Dec 2, 2010 at 20:59

Eduardo

7,9562 gold badges34 silver badges34 bronze badges

Collectives™ on Stack Overflow

Javascript to check a checkbox if an other checkbox is checked

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related