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元素，然后设置其checked元素使用.prop()方法的属性。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: