Targeting a span that is wrapped around a radio input

1
votes

My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.

Example:

<label class="radio">
<div class="radio" id="uniformed-undefined">
    <span class="checked">
        <input type="radio" name="grow" value="slash">
    </span>
</div>

How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?

I've looked into .before() but I'm not sure that's the correct answer.

2
javascriptjqueryhtml

2 Answers

7
votes

jQuery multiple attribute selector
and jQuery parent

$("input[name='grow'][value='slash']").parent("span");
1
votes

$("span.checked:has(input[name='grow'][value='slash'])")

JS Fiddle: http://jsfiddle.net/RgN7H/1