Question

When I click .getdata, I want to go from .getdata to name=top and read the value of whichever option is selected (in this case it’s 0), but I’m having a hard time getting to it. I keep getting undefined.

This is my html. The div class="main" repeats so I can’t simply select input[name=top]. It would have to be through traversing the tree to the closest input[name=top]. Can someone get this right? I’m starting to think it’s a browser error because I tried different options and all give me undefined.

<div class="main">
   <div class="branch">
       <div class="element">
          <label>top color:</label>
          <input type="radio" value="1" name="top">black
          <input type="radio" value="0" name="top" checked="checked">white
          <input type="radio" value="null" name="top">transparent
       </div>
   </div>
   <div class="controls">
      <a class="getdata">get data</a>
   </div>           
</div>

<div class="main">
....    
</div>

Answer 1

$('a.getdata').click(function() {
    var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});

• Place a click()^(docs) event on the <a> element

• On a click, use the closest()^(docs) method to traverse up to the .main element

• Then use the find()^(docs) method along with the the attribute-equals-selector^(docs) and the checked-selector^(docs) to get the checked name="top" radio.

• Finally use the val()^(docs) method to get its value.