CODEWITHSUNDEEP
javascriptjquerycheckbox
anmaree
anmaree

Reputation: 657

check checkbox if another checkbox is checked

I want the checkbox with the value 2 to automatically get checked if the checkbox with the value 1 is checked. Both have the same id so I can't use getElementById.

html:

<input type="checkbox" value="1" id="user_name">1<br>
<input type="checkbox" value="2" id="user_name">2

I tired: 

var chk1 = $("input[type="checkbox"][value="1"]");
var chk2 = $("input[type="checkbox"][value="2"]");

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

Upvotes: 5

Views: 27001

Answers (5)

Felix
Felix

Reputation: 38102

You need to change your HTML and jQuery to this:

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");

chk1.on('change', function(){
    chk2.prop('checked',this.checked);
});

  1. id is unique, you should use class instead.

  2. Your selector for chk1 and chk2 is wrong, concatenate it properly using ' like above.

  3. Use change() function to detect when first checkbox checked or unchecked then change the checked state for second checkbox using prop().

Fiddle Demo

Upvotes: 9

Palash
Palash

Reputation: 598

The error is probably coming here "input[type="checkbox"] Here your checkbox is out of the quotes, so you query is looking for input[type=][value=1]

Change it to "input[type='checkbox'] (Use single quote inside double quote, though you don't need to quote checkbox)

http://api.jquery.com/checked-selector/

Upvotes: 1

amit_183
amit_183

Reputation: 981

first create an input type checkbox:

   <input type='checkbox' id='select_all'/>   


   $('#select_all').click(function(event) {   
            if(this.checked) {
               $(':checkbox').each(function() {
                this.checked = true;                        
              });
            }
           });

Upvotes: 0

wharding28
wharding28

Reputation: 1349

You need to change the ID of one. It is not allowed by W3C standard (hence classes vs ID's). jQuery will only process the first ID, but most major browsers will treat ID's similar to classes since they know developers mess up.

Solution:

<input type="checkbox" value="1" id="user_name">1<br>
<input type="checkbox" value="2" id="user_name_2">2

With this JS:

var chk1 = $('#user_name');
var chk2 = $('#user_name2');

//check the other box
chk1.on('click', function(){
  if( chk1.is(':checked') ) {
    chk2.attr('checked', true);
  } else {
    chk2.attr('checked', false);
  }
});

For more information on why it's bad to use ID's see this: Why is it a bad thing to have multiple HTML elements with the same id attribute?

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Id should be unique, so that set different ids to your elements, By the way you have to use .change() event to achieve what you want.

Try,

HTML:

<input type="checkbox" value="1" id="user_name1">1<br>
<input type="checkbox" value="2" id="user_name2">2

JS:

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");

chk1.change(function(){
  chk2.prop('checked',this.checked);
});

Upvotes: 1

Related Questions