How To Find Nearest Set Of Radio Button And Clear Them

id='q31:1

Solution 1:

You were close to solution, Use .closest() to traverse up to answer element, then use .find() to target the child :radio element then set its checked property using .prop() method.

$(this).closest('.answer').find(':radio').prop('checked', false)

As you are using jQuery, I would recommend to use unobtrusive event handler

$('button[name=clear]').on('click', function() {
    $(this).closest('.answer').find(':radio').prop('checked', false)
});

$('button[name=clear]').on('click', function() {
  $(this).closest('.answer').find(':radio').prop('checked', false)
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="answer"><divclass="r0"><inputtype="radio"name="q31:1_answer"value="0"><labelfor="q31:1_answer0"class="m-l-1">a. &lt;break&gt;</label></div><divclass="r1"><inputtype="radio"name="q31:1_answer"value="1"><labelfor="q31:1_answer1"class="m-l-1">b. &lt;br&gt;</label></div><divclass="r0"><inputtype="radio"name="q31:1_answer"value="2"><labelfor="q31:1_answer2"class="m-l-1">c. &nbsp;&lt;lb&gt;</label></div><buttontype='button'name='clear'>Clear</button></div><divclass="answer"id=1><divclass="r0"><inputtype="radio"name="q105:2_answer"value="0"id="q105:2_answer0"><labelfor="q105:2_answer0"class="m-l-1">a. Home Tool Markup Language</label></div><divclass="r1"><inputtype="radio"name="q105:2_answer"value="1"id="q105:2_answer1"><labelfor="q105:2_answer1"class="m-l-1">b. Hyper Text Markup Language</label></div><divclass="r0"><inputtype="radio"name="q105:2_answer"value="2"id="q105:2_answer2"><labelfor="q105:2_answer2"class="m-l-1">c. Hyperlinks and Text Markup Language</label></div><buttontype='button'name='clear'>Clear</button></div>

Share