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;

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;

• javascript
• jquery
• checkbox

• 3 you should give different id to different elements. – Rajaprabhu Aravindasamy Commented Jan 27, 2014 at 4:04
• 1 cant share same ID with multiple elements!!! – deviloper Commented Jan 27, 2014 at 4:04

5 Answers 5

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

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);
});

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?

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/

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;                        
              });
            }
           });