Перебирая переключатели, скрывая невыбранные - PullRequest
Новая
       15

Перебирая переключатели, скрывая невыбранные

0 голосов
/ 21 декабря 2011

У меня есть группы переключателей, которые я пытаюсь сделать, это перебрать и скрыть переключатели и ярлыки любых невыбранных (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>

Мужской Женский

Ответы [ 3 ]

3 голосов
/ 21 декабря 2011

Достаточно двух строк кода: 

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

Нет необходимости в циклах с использованием each() или при ручном поиске меток с помощью next() - просто позвольте селекторам делать свою работу!

Вот jsfiddle для демонстрации (не скрывая, а меняя цвет) :

http://jsfiddle.net/bZcHq/

Также нет необходимости добавлять class='radio' к каждомупереключатель.Селектор атрибута [type=radio] будет достаточен, если вы не планируете поддерживать IE6.

0 голосов
/ 21 декабря 2011

См. Ниже, чтобы выбрать все непроверенные входы с классом 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();
});
0 голосов
/ 21 декабря 2011

Как насчет этого: 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');
    });
}
...