• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Selecting all checked checkboxes with jquery

 
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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

 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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)
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Quick! Before anybody notices! Cover it up with this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic