Setting checkbox as checked with jQuery

Question

I have two input checkboxes, and I want to check/uncheck them with jQuery:

<input type="checkbox" name="user1" value="1" id="u1" onclick="loadUserCalendar(1)">
<input type="checkbox" name="user2" value="2" id="u2" onclick="loadUserCalendar(2)">

JavaScript code:

var list = new cookieList("calendar_users"); 
var users = list.items();
for (var i = 0; i < users.length; i++) {
    $('input[name="user' + users[i].substr(1,1) + '"]').attr('checked', true);
    console.log('substring: ' + users[i].substr(1,1));
    console.log('enabling user ' + users[i]);
}

var users contains these values: u1,u2 . To only get the user ID, I perform a substring, which gets me the correct number as you can see below in the console output.

Console output:

substring: 1
enabling user u1
substring: 2 
enabling user u2

I have no idea, why the checkboxes are not checked when the code ran. What am I doing wrong here?

Edit: I am using jQuery 1.4.4 due to compatibility reasons, that's why I am using .attr()

000 · Accepted Answer · 2013-07-05 16:01:30Z

2

Inline event handlers (onclick="loadUserCalendar(1)") are not the jQuery way. You should not have any in your html. Get rid of them and add to your jquery:

$(function() {
    $('form').on('click',':checkbox', function() {
        loadUserCalendar($(this).val());
    });
});

But maybe what you wanted was this:

$(function() {
    $('form').on('click',':checkbox', function() {
        $('form :checkbox').attr('checked','checked');
    });
});

The jquery 1.ancient version:

$(function() {
    $('input[type=checkbox]').live('click', function() {
        // do things
    });
});

edited Jul 5, 2013 at 16:01

answered Jul 5, 2013 at 15:48

000

27.3k10 gold badges74 silver badges103 bronze badges

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

7 Comments

nimrod Over a year ago

It says this: Uncaught TypeError: Object #<Object> has no method 'on'

000 Over a year ago

What version of jQuery are you using? 1.4.potato?

nimrod Over a year ago

I am using jQuery 1.4.4 due to compatibility reasons

000 Over a year ago

You mean due to incompatibility reasons, lol. I've updated my answer. Please consider updating your compatibility.

nimrod Over a year ago

Thanks for this. This fixed the "not jQuery way". If I reload my page, I lose the checked checkboxes again, and that was my main problem. Do you also have an answer for this?

|

putvande · Accepted Answer · 2013-07-05 15:46:59Z

0

What version of jQuery are you using?

You have to try something like :

$('input[name="user' + users[i].substr(1,1) + '"]').attr('checked', 'checked');

or

$('input[name="user' + users[i].substr(1,1) + '"]').prop('checked', 'checked');

The second one is jQuery 1.6+

answered Jul 5, 2013 at 15:46

putvande

15.3k3 gold badges37 silver badges51 bronze badges

1 Comment

nimrod Over a year ago

Hey, I tried the first approach but still no result. The checkbox is not being checked. The second one cannot be used as I am using jQuery 1.4.4.

user2505300 · Accepted Answer · 2013-07-05 15:48:17Z

0

When you want something to be checked you have to do the following:

 $('.myCheckbox').attr('checked','checked');

answered Jul 5, 2013 at 15:48

user2505300

3 Comments

user2505300 Over a year ago

Please make shure that you have the right selector $('!your selector!').attr('checked', 'checked);

nimrod Over a year ago

This is exactly the question and that's why I posted this question. If you think the selector is wrong, please tell me the correct one and I will accept it as answer.

user2505300 Over a year ago

Maybe its a JQuery problem. I would suggest you not using such complex statements. Rather use the id selector with #u1, #u2, ...

Lukas Narus · Accepted Answer · 2013-07-05 15:48:33Z

0

If you have created the checkboxes dynamically use jQuery on method, because simple functions won't be able to access these elements.

answered Jul 5, 2013 at 15:48

Lukas Narus

11311 bronze badges

1 Comment

000 Over a year ago

live has been deprecated for centuries.

Eulinky · Accepted Answer · 2013-07-05 16:21:24Z

0

Regarding the initialization of the checkboxes I would suggest something like this:

$('input[type=checkbox]').each(function(index, box) {
    $(box).attr('checked', $.inArray($(box).attr("id"), users) != -1);
});

answered Jul 5, 2013 at 16:21

Eulinky

3753 silver badges14 bronze badges

Collectives™ on Stack Overflow

Setting checkbox as checked with jQuery

5 Answers 5

7 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related