javascript - 如何找到最近的一组单选按钮并清除它们

Question

<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>

我有两组单选按钮和一组清除按钮，我想清除最近的一组单选按钮 单击清除按钮时。我首先尝试通过以下代码使用单组单选按钮进行清除 哪个有效。

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

但后来我写了一个脚本来找到最近的一个并清除它，但没有用。 在下面的代码中，我试图找出输入元素的名称，然后将其清除，名称将是动态的，因此我无法对其进行硬编码。

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;
}

谁能帮我写一个脚本来完成预期的工作？

Answer 1

您已接近解决方案，请使用 .closest()遍历 answer 元素，然后使用 .find()以子 :radio 元素为目标，然后使用 .prop() 设置其 checked 属性方法。

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

当你使用 jQuery 时，我建议使用不显眼的事件处理程序

$('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>