How do I apply checks to a checkbox in JQuery

G-Money · 22-12-2011 12:41pm #1

I'm working on a dev thing at work and I need to have the code apply checks to checkboxes. By that I mean, it literally has to mark the little square box as checked like it would be if the user clicked on it.

I'm completely new to jQuery and it's doing my head in at the moment.

Any idea how I go about programmatically checking a checkbox?

Thanks.

EoghanConway · 22-12-2011 12:48pm

Set the checked attribute to checked

eg.
$("checkBox").attr("checked", "checked");

<html>
<head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
</head>
<body>
<form>
<input type=checkbox id=myCheckbox selected=false />
<input type=button value=attr onclick=$('#myCheckbox').attr('checked','checked')>
<input type=button value=prop onclick=$('#myCheckbox').attr('checked', true)>
<input type=button value=clear onclick=$('#myCheckbox').attr('checked',false)>
</form>
</body>
</html>

Giblet · 22-12-2011 1:42pm

Why use jQuery at all?
var checkbox = document.getElementById('checkboxid');
checkbox.checked = true;

G-Money · 22-12-2011 1:52pm

It's the way the site is developed, they've used quite a lot of jQuery and as far as I know, this modification I'm making needs to be done via jQuery.

Giblet · 22-12-2011 1:58pm

That doesn't make any sense as you could just as easily use javascript.
If you need a query engine (besides document.querySelector).
I would do the following.

var checkbox = $(".someCheckboxClass");
if(checkbox.length){
    //can loop if more than one result, using for(var i... as querys aren't sparse
    checkbox[0].checked = true;
}

Don't use the .attr function if you an help it, it's been broken a few times now (and is inherently broken)

G-Money · 22-12-2011 2:18pm

I don't really understand the whole setup myself to be honest and I don't really know what jQuery is or why it's being used here instead of something else.

Giblet · 22-12-2011 2:28pm

Ah ok. Well jQuery is written in JavaScript, it's just a library of functions that tries to normalise common JavaScript functions or improve functionality. Where ever you can use jQuery, you can use JavaScript. However, it's overkill for a lot of basic functions. Checking a checkbox is pretty basic, and supported in all browsers just by setting the checked property directly.

G-Money · 22-12-2011 2:35pm

Yeah it's a case where the checkbox or checkboxes gets unchecked by something else and I need to add a function that makes the same ones checked again. It's a little frustrating as I'm still learning the ropes and it's a big enough project.

Hopefully I'll be able to cobble something together.

GetWithIt · 22-12-2011 2:52pm

Giblet wrote: »
That doesn't make any sense as you could just as easily use javascript.
If you need a query engine (besides document.querySelector).
I would do the following.
var checkbox = $(".someCheckboxClass");
if(checkbox.length){
    //can loop if more than one result, using for(var i... as querys aren't sparse
    checkbox[0].checked = true;
}
Don't use the .attr function if you an help it, it's been broken a few times now (and is inherently broken)

^^ This.

Contriving to use jQuery in this scenario is a classic anti-pattern. If you don't understand why you need to use some library then don't.

8k2q1gfcz9s5d4 · 22-12-2011 3:04pm

Giblet wrote: »

Where ever you can use jQuery, you can use JavaScript. However, it's overkill for a lot of basic functions.

yes and yes, however if a lot of jquery is being used on a site it pays to be consistent! makes it a lot esier for the next guy reading you code.

GetWithIt · 22-12-2011 4:05pm

Kobe Tall Fabric wrote: »

yes and yes, however if a lot of jquery is being used on a site it pays to be consistent! makes it a lot esier for the next guy reading you code.

No it doesn't.
checkbox[0].checked = true;is perfectly readable. It's obvious what you're doing and what the consequences of that action are.

Calling some jQuery method which hides that implies that jQuery is needed to do that action - it's not - and that if it is being used in deference to just calling the appropriate javascript that some other action is occurring within the jQuery method which is necessary to complete the requirement - which in this case is not.

Cue 30 mins rooting through the jQuery library to figure out why the jQuery method was and and another 30 cursing the previous developer. Using jQuery in this instance just obfuscates what you are doing.

jQuery is just a javascript library.

Malice · 22-12-2011 4:52pm

I'm not going to get into the argument of whether it's better to use JavaScript or jQuery, I'm just going to recommend to the thread starter to check out the book jQuery in Action if they are going to be doing much more work in jQuery. I found it very helpful when I had to learn jQuery in a hurry.

Giblet · 22-12-2011 4:54pm

Malice wrote: »

I'm not going to get into the argument of whether it's better to use JavaScript or jQuery, I'm just going to recommend to the thread starter to check out the book jQuery in Action if they are going to be doing much more work in jQuery. I found it very helpful when I had to learn jQuery in a hurry.

"Based on jQuery 1.2"

8k2q1gfcz9s5d4 · 22-12-2011 6:19pm

GetWithIt wrote: »

No it doesn't.
checkbox[0].checked = true;is perfectly readable. It's obvious what you're doing and what the consequences of that action are.

Calling some jQuery method which hides that implies that jQuery is needed to do that action - it's not - and that if it is being used in deference to just calling the appropriate javascript that some other action is occurring within the jQuery method which is necessary to complete the requirement - which in this case is not.

Cue 30 mins rooting through the jQuery library to figure out why the jQuery method was and and another 30 cursing the previous developer. Using jQuery in this instance just obfuscates what you are doing.

jQuery is just a javascript library.

you have missed my point. it doesnt matter if you use jquery or javascript (its all javascript anyway). what i said was pick one, and dont mix and match notations where you feel appropiate. Its only when notations get mixed up that people get confused. If JQuery is being used on an app (I cant see why people wouldnt use it, it helps to create a very rich interface on a web app) then it should be used everywhere, even for something as simple as checking a check box

EDIT: it also requires less code, "$" vs "document.getElementById"

Giblet · 22-12-2011 6:25pm

Kobe Tall Fabric wrote: »

you have missed my point. it doesnt matter if you use jquery or javascript (its all javascript anyway). what i said was pick one, and dont mix and match notations where you feel appropiate. Its only when notations get mixed up that people get confused. If JQuery is being used on an app (I cant see why people wouldnt use it, it helps to create a very rich interface on a web app) then it should be used everywhere, even for something as simple as checking a check box

EDIT: it also requires less code, "$" vs "document.getElementById"

jQuery is fundamentally broken and slow compared to native methods. Reason enough no? If typing less is a concern, write a wrapper.
var $ = document.querySelectorAll;
There, if your context is ie8 or above, you don't need jQuery anymore. That would probably account for 90% of the use of jQuery.
Do you know how many people had to rewrite code who used .attr("checked") in the last few months and upgraded their jQuery when 1.6 hit?
Do you also know how many people had to fix .checked in that same period (or ever really?)

You can create rich interfaces with very little js and without a library at all.

smcelhinney · 23-12-2011 11:51am

OP

Think this has changed in jQuery 1.6 to .prop()

See here.

Malice · 23-12-2011 12:52pm

Giblet wrote: »

"Based on jQuery 1.2"

And your point is?

GetWithIt · 23-12-2011 12:52pm

smcelhinney wrote: »

OP

Think this has changed in jQuery 1.6 to .prop()

See here.

Urghh

Giblet · 23-12-2011 12:53pm

smcelhinney wrote: »

OP

Think this has changed in jQuery 1.6 to .prop()

See here.

That page makes me laugh, the amount of rubbish it goes through to do one simple thing.
Seriously, .checked is your only man.

Giblet · 23-12-2011 12:53pm

Malice wrote: »

And your point is?

Read the post above where they ****ed around with attr and prop and whatever and tell me that someone who read a 1.2 book would have a consistent view of how to handle it correctly? THAT is my point.

.checked has worked since day one.

Malice · 23-12-2011 6:50pm

Giblet wrote: »

Read the post above where they ****ed around with attr and prop and whatever and tell me that someone who read a 1.2 book would have a consistent view of how to handle it correctly? THAT is my point.

.checked has worked since day one.

I recommended a book that I read based on my own experience of being in a similar situation to the thread starter. Now maybe I'm misunderstanding you but criticising the book just because it refers to an older version of the library is doing a disservice to the book itself and the thread starter.

Giblet · 23-12-2011 7:30pm

Malice wrote: »

I recommended a book that I read based on my own experience of being in a similar situation to the thread starter. Now maybe I'm misunderstanding you but criticising the book just because it refers to an older version of the library is doing a disservice to the book itself and the thread starter.

I don't care about the book at all in any way. The fact that you would need to download 1.2 for it to be relevant is the only thing that matters, which boggles the mind as to why you would even suggest that. The OP hasn't stated what version they are using.

Malice · 23-12-2011 8:06pm

Giblet wrote: »

I don't care about the book at all in any way.

Obviously you do considering you appear to have such a bee in your bonnet about it.

Giblet wrote:

The fact that you would need to download 1.2 for it to be relevant is the only thing that matters, which boggles the mind as to why you would even suggest that.

It boggles your mind that I would suggest a book that I found useful? I've just checked my version of the book and it's the second edition which used jQuery 1.4 and I've run a couple of the source code examples under both jQuery 1.6 and jQuery 1.7 without any issues. Maybe I'm just lucky...

Giblet · 24-12-2011 12:50am

No bee, nothing to do with the bOok at all, it's just the suggestion that you use any abstraction of JavaScript that's proved to be inconsistent as proved In this very thread. And your examples or experiences are also irrelevant as this very thread has posters posting various cases of checking a checkbox having changed over time with multiple paragraphs of Api docs trying to explain how something like .checked = true needs to be abstracted to inconsistent behaviour? whatever has worked for you is irrelevant as there is cases of stuff that had worked failing all of a sudden also posted in this thread. You might have got lucky but in this context, lots haven't. But continue to tell me whatever you think is right. I don't care, just don't let that torch burn your fingers

MagicRon · 25-12-2011 8:56pm

Using JQuery to tick a checkbox is overkill!

Malice · 25-12-2011 11:16pm

Giblet wrote: »

I don't care

That's the second time you've seen fit to say that. I think it's not me you're trying to convince.

How do I apply checks to a checkbox in JQuery

Comments