CODEWITHSUNDEEP
javascriptjqueryhtml
Matthew Colley
Matthew Colley

Reputation: 11446

get span children of a radio button element

I have a row of radio buttons that is used for shipping charges. If a user clicks on a button, I am in need of collecting the two spans (the price and the cost ) that are contained in the div used used by the radio button element. All of the radio button share the same class called 'all-items' Here is the html:

<li class="all-items">
<input name="shipping_method" type="radio" value="usps_1" id="s_method_usps_1" checked="checked" class="radio">
<label for="s_method_usps_1" style="display:block; overflow:hidden;">
<span class="price">$30.20</span>
<span class="cost">Priority Mail </span>
</label>
</li>

Here is the jQuery I am working with. 

         jQuery("input:radio[name=shipping_method]").click(function() {
         var shipping = jQuery(this).val();
         console.log(shipping);
         console.log(jQuery(this).find('span'));
         });

Upvotes: 0

Views: 297

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

SPAN aren't children of radio element. I'd suggest you to get the relevant LI parent and then target relevant SPANs, e.g:

jQuery(this).closest('.all-items').find('.price, .cost') // add specific SPAN classes if needed

I personnaly prefer it over jQuery(this).closest('.all-items').find('span') because this explicitely tell which specific SPANs you are looking for.

Upvotes: 2

Related Questions