Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Selecting all checked checkboxes with jquery

 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi

I am trying to select all the checked on a page with jquery :checked selector but I am having problems with it.

I have a tab on website and within 2 of these tabs I have separate check boxes. So what I did was on all input checkboxes I put a class on them. So for tab one all those checkboxes would have say a css class called "tab1" and the second tab checkboxes would have "tab2".

I was then planning to do this:

$('.tab1 :checked");

To find all the checkboxes in tab one that are checked but this never finds anything.

However Some of the checkboxes I have get rendered on server side since the user might already have information in the database. So these seem to get rendered something like this

<span class="tab1">
<input id="id" type="checkbox" name="name"/>
</span>

So when I do the above jquery on it I get all the checked boxes that are checked. It is just when I add the input boxes through jquery without this span tags around it I can't find any of the checked checkboxes. So I guess I could wrap all of them around with span tags but I just want to know why this is happening in the first place?

Thanks

 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I do not understand what you are trying to say.

Sounds like to me you hae <input type="checkbox" class="tab1" /> and you are wondering why that selector does not work.

Your selector is saying look for an element that is checked whose parent has a class.

If you want to do it so it is not looking at a parent you do not need a space

$(".tab1:checked")


You can also do it like this:

$("input.tab1[@type=radio][@checked]")

Eric
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:I do not understand what you are trying to say.

Sounds like to me you hae &amp;amp;lt;input type=&amp;quot;checkbox&amp;quot; class=&amp;quot;tab1&amp;quot; /&amp;amp;gt; and you are wondering why that selector does not work.

Your selector is saying look for an element that is checked whose parent has a class.

If you want to do it so it is not looking at a parent you do not need a space

$(&amp;quot;.tab1:checked&amp;quot;)


You can also do it like this:

$(&amp;quot;input.tab1[@type=radio][@checked]&amp;quot;)

Eric


Ya I am just wondering why it did not find any of the checked checkboxes.

I think I tried it without a space and it still did not work for me. It only worked for me when I had a &amp;lt;span&amp;gt; tag around my input checkbox and the span tag had the class selector.

So I was wondering why this is the case?

Also how would I find all unchecked checkboxes?

Edit

Never mind about the unchecked I figured it out(forgot about the not operator)
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64845
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Michael Hubele wrote:So I was wondering why this is the case?

It's very straight-forward. Your selector searches for checked items inside a container with a specific class. If they're not in such a container, the selector will not match it. Simple.

I don;t understand why you feel that it should.
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:
Michael Hubele wrote:So I was wondering why this is the case?

It's very straight-forward. Your selector searches for checked items inside a container with a specific class. If they're not in such a container, the selector will not match it. Simple.

I don;t understand why you feel that it should.


Well if I had the class in the actual checkbox would that not be the container? I thought it would search for everything with that class in it evaluate it and see that it is checked.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64845
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's not what your selector says.

It says: "find all checked elements that are children of an element with class tab1".

For a selector that says "find all checked elements that have the class tab1";, no space:

$(".tab1:checked")

The space is an &amp;quot;operator&amp;quot; that connotes containment. That's basic CSS -- nothing jQuery-specific.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic