如何找到最近的一组单选按钮并清除它们 [英] How to find nearest set of radio button and clear them

查看：60
本文介绍了如何找到最近的一组单选按钮并清除它们的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<div class="r0"><input type="radio" name="q31:1_answer" value="0" <?php echo ($quiz_answer1=='0' )?'检查':''?>id="q31:1_answer0"><label for="q31:1_answer0" class="m-l-1">a.&lt;break>
<div class="r1"><input type="radio" name="q31:1_answer" value="1" <?php echo ($quiz_answer1=='1' )?'检查':''?>id="q31:1_answer1"><label for="q31:1_answer1" class="m-l-1">b.&lt;br&gt;

<div class="r0"><input type="radio" name="q31:1_answer" value="2" <?php echo ($quiz_answer1=='2' )?'检查':''?>id="q31:1_answer2"><label for="q31:1_answer2" class="m-l-1">c.&nbsp;<lb>

<button type='button' name='clear' onclick=javascript:clear_me(this);>Clear</button>

<div class="r0"><input type="radio" name="q105:2_answer" value="0" id="q105:2_answer0" <?php echo ($quiz_answer4=='0' )?'检查':''?>><label for="q105:2_answer0" class="m-l-1">a.主页工具标记语言</label>

<div class="r1"><input type="radio" name="q105:2_answer" value="1" id="q105:2_answer1" <?php echo ($quiz_answer4=='1' )?'检查': ''?>><label for="q105:2_answer1" class="m-l-1">b.超文本标记语言</label>

<div class="r0"><input type="radio" name="q105:2_answer" value="2" id="q105:2_answer2" <?php echo ($quiz_answer4=='2' )?'检查': ''?>><label for="q105:2_answer2" class="m-l-1">c.超链接和文本标记语言</label>

<button type='button' name='clear' onclick=javascript:clear_me();>Clear</button>

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

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

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

函数 clear_me(){var elementName = $(this).closest('.answer').closest('.r0').closest('input').attr('name');var ele = document.getElementsByName(elementName);for(var i=0;i

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

解决方案

您已接近解决方案，请使用 .closest() 遍历到 answer 元素，然后使用 .find() 定位子 :radio 元素，然后使用 checked 属性="https://api.jquery.com/prop/" rel="nofollow noreferrer">.prop() 方法.

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

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

<div class="r0"><input type="radio" name="q31:1_answer" value="2"><label for="q31:1_answer2" class="m-l-1">c.&nbsp;<lb>

<button type='button' name='clear'>Clear</button>

<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.主页工具标记语言</label>

<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.超文本标记语言</label>

<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.超链接和文本标记语言</label>

<button type='button' name='clear'>Clear</button>

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

解决方案

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>

这篇关于如何找到最近的一组单选按钮并清除它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆