循环单选按钮，隐藏未选择的按钮答案

【问题标题】：Looping through radio buttons, hiding unslected ones循环单选按钮，隐藏未选择的按钮
【发布时间】：2011-12-21 23:03:56
【问题描述】：

我有一组单选按钮，我想做的是循环并隐藏任何未选中的单选按钮和标签（addClass .hiddenRadio）。另一方面是我需要在另一个事件点击时再次启用它们

<input class="radio" type="radio" name="sex_1" value="male" /><label>Male</label>
<input class="radio" type="radio" name="sex_1" value="female" /><label>Female</label>

<input class="radio" type="radio" name="sex_2" value="male" /><label>Male</label>
<input class="radio" type="radio" name="sex_2" value="female" /><label>Female</label>

男性女性

【问题讨论】：

您确实应该将id 属性添加到您的input 元素，并将相应的for 属性添加到您的label 元素。否则，标签将无法按预期工作。

标签： jquery radio-button show-hide selected

【解决方案1】：

两行代码真的够了：

$("input[type=radio]:not(:checked)").addClass("hiddenRadio");
$("input[type=radio]:not(:checked) + label").addClass("hiddenLabel");

无需使用 each() 进行循环或使用 next() 手动查找标签 - 让选择器完成他们的工作！

这里有一个jsfiddle来演示（不是隐藏，而是改变颜色）：

http://jsfiddle.net/bZcHq/

此外，无需将class='radio' 添加到每个单选按钮。只要您不打算支持 IE6，属性选择器 [type=radio] 就足够了。

【讨论】：

你还需要添加兄弟标签
radio 类型的每个元素都是input 因此$("[type=radio]:not(:checked)") 也可以使用
@abuduba 包括带有类的标签在 jQuery 中更快（嘶嘶声）artzstudio.com/2009/04/jquery-performance-rules
我知道，但差别很小:)
@abuduba 在这种情况下确实如此，但对于解决方案的其余部分则不一定。 type 属性在 a、link、object 和其他元素上也有效。但是，radio 值应该只出现在 input 元素上，但仍然...

【解决方案2】：

这样的事情怎么样：http://jsfiddle.net/GTzL4/4/

HTML

<input class="radio" type="radio" name="sex_1" value="male" checked /><label>Male</label>
<input class="radio" type="radio" name="sex_1" value="female" /><label>Female</label>

    <input class="radio" type="radio" name="sex_2" value="male" /><label>Male</label>
<input class="radio" type="radio" name="sex_2" value="female" checked /><label>Female</label>

<button onclick="hideUnSelected()">Hide</button>
<button onclick="showAll()">Show</button>

CSS

.hidden{display:none;}

function hideUnSelected(){
    $('.radio:not(:checked)').each(function(){
        $(this).addClass('hidden').next('label').addClass('hidden');
    });
}
function showAll(){
    $('.radio').each(function(){
        $(this).removeClass('hidden').next('label').removeClass('hidden');
    });
}

【讨论】：

【解决方案3】：

请参阅以下内容，它会选择具有 radio 类的所有未选中输入并隐藏相应的标签：

$(".radio:not(:checked)").each(function() {
    // If you the hiddenRadio class added to both
    $(this).addClass("hiddenRadio").next().addClass("hiddenRadio");

    // Otherwise if you just want to hide the label
    $(this).addClass("hiddenRadio").next().hide();
});

【讨论】：