How to find nearest set of radio button and clear them

问题

<div class="answer">
    <div class="r0">
        <input type="radio" name="q31:1_answer" value="0" <?php echo ($quiz_answer1=='0' )? 'checked': ''?> id="q31:1_answer0">
        <label for="q31:1_answer0" class="m-l-1">a. &lt;break&gt;
        </label>
    </div>
    <div class="r1">
        <input type="radio" name="q31:1_answer" value="1" <?php echo ($quiz_answer1=='1' )? 'checked': ''?> id="q31:1_answer1">
        <label for="q31:1_answer1" class="m-l-1">b. &lt;br&gt;
        </label>
    </div>
    <div class="r0">
        <input type="radio" name="q31:1_answer" value="2" <?php echo ($quiz_answer1=='2' )? 'checked': ''?> id="q31:1_answer2">
        <label for="q31:1_answer2" class="m-l-1">c. &nbsp;&lt;lb&gt;
        </label>
    </div>
    <button type='button' name='clear' onclick=javascript:clear_me(this);>Clear</button>
</div>

<div class="answer" id=1>
    <div class="r0">
        <input type="radio" name="q105:2_answer" value="0" id="q105:2_answer0" <?php echo ($quiz_answer4=='0' )? 'checked': ''?> >
        <label for="q105:2_answer0" class="m-l-1">a. Home Tool Markup Language</label>
    </div>
    <div class="r1">
        <input type="radio" name="q105:2_answer" value="1" id="q105:2_answer1" <?php echo ($quiz_answer4=='1' )? 'checked': ''?>>
        <label for="q105:2_answer1" class="m-l-1">b. Hyper Text Markup Language</label>
    </div>
    <div class="r0">
        <input type="radio" name="q105:2_answer" value="2" id="q105:2_answer2" <?php echo ($quiz_answer4=='2' )? 'checked': ''?>>
        <label for="q105:2_answer2" class="m-l-1">c. Hyperlinks and Text Markup Language</label>
    </div>
    <button type='button' name='clear' onclick=javascript:clear_me();>Clear</button>
</div>

I have two sets of Radio buttons and clear button with each one set,I want to clear the nearest set of radio button on clicking the clear button.I first tried with clearing with single set of radio button by the following code which works.

function clear_me()
{
$('input:radio').attr("checked", false);
}

But then later I wrote a script to find nearest one and clear it,which didnt work. In the below code I am trying to find out name of the input element and then clear it,name is going to dynamic so I can't hard code it.

function clear_me()
{
var elementName =  $(this).closest('.answer').closest('.r0').closest('input').attr('name');
var ele = document.getElementsByName(elementName);
    for(var i=0;i<ele.length;i++)
        ele[i].checked = false;
}

Can anyone please help me in writing a script to do the expected work ?

回答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)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer">
  <div class="r0">
    <input type="radio" name="q31:1_answer" value="0">
    <label for="q31:1_answer0" class="m-l-1">a. &lt;break&gt;
        </label>
  </div>
  <div class="r1">
    <input type="radio" name="q31:1_answer" value="1">
    <label for="q31:1_answer1" class="m-l-1">b. &lt;br&gt;
        </label>
  </div>
  <div class="r0">
    <input type="radio" name="q31:1_answer" value="2">
    <label for="q31:1_answer2" class="m-l-1">c. &nbsp;&lt;lb&gt;
        </label>
  </div>
  <button type='button' name='clear'>Clear</button>
</div>

<div class="answer" id=1>
  <div class="r0">
    <input type="radio" name="q105:2_answer" value="0" id="q105:2_answer0">
    <label for="q105:2_answer0" class="m-l-1">a. Home Tool Markup Language</label>
  </div>
  <div class="r1">
    <input type="radio" name="q105:2_answer" value="1" id="q105:2_answer1">
    <label for="q105:2_answer1" class="m-l-1">b. Hyper Text Markup Language</label>
  </div>
  <div class="r0">
    <input type="radio" name="q105:2_answer" value="2" id="q105:2_answer2">
    <label for="q105:2_answer2" class="m-l-1">c. Hyperlinks and Text Markup Language</label>
  </div>
  <button type='button' name='clear'>Clear</button>
</div>

来源：https://stackoverflow.com/questions/44698085/how-to-find-nearest-set-of-radio-button-and-clear-them

标签

javascript

jquery

html

css

radio-button