ラジオボタンをループして非選択のものを隠す

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

radioクラスで、すべての未チェックの入力を選択し、対応するラベルを隠し、以下を参照してください：あなたは本当にあなたの `input`要素、および対応する` for`属性に属性id` `追加する必要があります

$(".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(); 
}); 

Answer 2

2行のコードでそれらを再度有効にする必要があり、このの他の側面は本当に十分ではありません：

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

どのようにこのようなものについて：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'); 
    }); 
}