jQuery checkbox question

Question

I have inherited the following code snippet:

<div id="topbox">
    <h3>
        <div class="compare_link">Compare Products</div> 
    <input type="checkbox" id="compare_123" name="chkcompare[]" value="123" />
    </h3>
</div>

What I'm trying to figure out is:

I want to find all h3 selectors that have compare_link and HTML checkbox as children and move the checkbox down 10 pixels.

I know I can find checkboxes with jQuery, but can I do this if the sibling is compare_link?

I don't have access to some of the code which is why I can't move the checkbox down myself.

Jason McCreary · Accepted Answer · 2010-10-02 20:37:30Z

4

You don't need jQuery for this necessarily. You can do this with CSS. However, browser support may vary.

h3 > div.compare_link + input[type="checkbox"] {
  margin-top: 10px;
}

If you want to use jQuery it takes CSS selectors. So the following should work:

$('h3 > div.compare_link + input[type="checkbox"]')

answered Oct 2, 2010 at 20:37

Jason McCreary

73.3k23 gold badges140 silver badges177 bronze badges

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

Comments

Thomas · Accepted Answer · 2010-10-02 20:36:15Z

2

Are you just asking for the selector?

$('h3 > .compare_link + :checkbox')

answered Oct 2, 2010 at 20:36

Thomas

2,1521 gold badge13 silver badges10 bronze badges

4 Comments

Jason McCreary Over a year ago

Good use of direct child selector.

coson Over a year ago

Yes, because once the elements are selected, then I should be able to set the css. What did you mean by your comment about the direct child selector?

coson Over a year ago

Yes, because once the elements are selected, then I should be able to set the css. What did you mean by your comment about the direct child selector?

coson Over a year ago

sorry about the 2x post, I wasn't done commenting. Did you mean ".compare_link + :checkbox"?

Peter Ajtai · Accepted Answer · 2010-10-02 22:47:18Z

0

For the most flexibility use:

$('h3 div.compare_link').siblings('input:checkbox')

This selects all checkboxes that are siblings of divs with the compare_link class. The div with the compare_link class must be descendants of an h3 tag.

The advantage is that this works even the checkbox is move infront of the div or another div is placed in between or if the compare_link div is wrapped in another div etc...

answered Oct 2, 2010 at 22:47

Peter Ajtai

57.8k13 gold badges124 silver badges143 bronze badges

Collectives™ on Stack Overflow

jQuery checkbox question

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related