Question

这让我困惑了一会儿，我尝试了几种不同的方法但没有成功。

我正在创建一个使用单选按钮的测验，但是通过点击它们所在的checked它们将会li显示它们，这完全可以解决我遇到的问题。被选中的当前checked广播获得unchecked，但如果用户想要改变主意并回到那个答案，则无法重新checked。

我尝试了多种方法，其中包括removeAttr("checked")，attr("checked", false)，只是给每个方法同名，只允许检查一个，但每个方法都会导致上述问题

这是一个JSFIDDLE，可以看到单选按钮以显示问题（单击所有4并尝试返回到不会重新检查的那个）

我可能只是遗漏了一些明显的东西，所以任何帮助都会非常感激。

HTML：

<div class="questionContainer">
    <div class="question">A random Question</div>
    <ul class="answers">
        <li>
            <input data-key="a" class="rad" type="radio" />an answer
        </li>
        <li>
            <input data-key="b" class="rad" type="radio" />another answer
        </li>
        <li>
            <input data-key="c" class="rad" type="radio" />and another answer
        </li>
        <li>
            <input data-key="d" class="rad" type="radio" />last answer
        </li>
    </ul>
</div>

Jquery的：

$(".answers li").click(function () {
    $(this).siblings("li").children("input:radio").removeAttr("checked");
    $(this).parent(".answers").children("li").removeClass("selected");
    $(this).children("input:radio").attr("checked", true);
    $(this).addClass("selected");
});

Answer 1

你可以使用道具：

http://jsfiddle.net/cy44mbhq/4/

$(this).children("input:radio").prop("checked", true);

Answer 2

您不想删除该属性，只想将checked属性设置为false。

变化：

$(this).siblings("li").children("input:radio").removeAttr("checked");

为：

$(this).siblings("li").children("input:radio").prop("checked", false);

<强> jsFiddle example

我的问题是，为什么你没有为单选按钮提供一个名称属性，这会将它们组合在一起？

Answer 3

我知道这并不是你要求的，但这是一个更好的方法来做你想要做的事情并且它不需要jQuery！

http://jsfiddle.net/Godisgood/cy44mbhq/5/

我在这里所做的就是使用<label> HTML标记。您可以指定<label然后for="，然后指定要将其附加到的元素的id（广播或复选框）。最后，看起来应该是这样的：

<label for="a">clickable element goes here</label>

另一种方法是将<label>标记包裹在radio或checkbox元素周围：

<label><input type="radio"/>Text for the label here</label>

注意：您可能仍需要为旧的和错误的IE浏览器添加for=属性。

注意：您需要重新设置LI.SELECTED CSS代码，因为当代码被包裹在<LABEL>时，LI没有被点击，{{1} IS。

希望有所帮助！

清除可回收的单选按钮

3 个答案:

http://jsfiddle.net/Godisgood/cy44mbhq/5/