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

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

男女的代码

来源

2011-12-21 LeBlaireau

你真的应该加上'id'属性你'input'元素，以及相应的'for'属性到你的'标签'元素。否则，标签将无法按预期工作。 – 2011-12-21 14:48:52

-1

查看哪些选择具有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(); 
});

来源

2011-12-21 14:42:05

两条线真的够：

$("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]就足够了。

来源

2011-12-21 14:35:51

您还需要添加兄弟标签 – Mathletics 2011-12-21 14:38:05

“radio”类型的每个元素都是'input'因此'$（“[type = radio]：not（：checked）”）'也可以工作 – abuduba 2011-12-21 14:42:38

@abuduba包括标签该类在jQuery（Sizzle）中速度更快http://www.artzstudio.com/2009/04/jquery-performance-rules/ – Mathletics 2011-12-21 14:50:49

怎么是这样的：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'); 
    }); 
}

来源

2011-12-21 14:41:00 Dutchie432

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

回答

相关问题