Question

我有一组单选按钮，我要做的是循环并隐藏任何未选中的单选按钮（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>

男女

Answer 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]就足够了。

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

<强> JS

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

Answer 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();
});

通过单选按钮循环，隐藏未选择的按钮

3 个答案: