Getting around this with jquery gives me undefined

Question

When I click .getdata, I want to go from .getdatato name=topand read the value of which parameter is selected (in this case, 0), but it’s hard for me to get to it, I keep getting undefined.

This is my html. Repeats div class="main", so I can’t just choose input[name=top]. It was supposed to go through the tree to the nearest input[name=top]. Can someone understand this? I am starting to think that this is a browser error because I have tried different options and everyone gives 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();
});

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

• closest() ^(docs) .main

• find() ^(docs) attribute-equals-selector ^(docs) checked-selector ^(docs), ​​ name="top".

• , val() ^(docs), .

Answer 2

$(".getdata").click(function(){
        selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
        console.log(selectedValue);
});