Скрыть непроверенный переключатель

Я хочу, чтобы скрытые переключатели спрятались и просто отобразили отмеченный флажок:

<ul class="woof_list woof_list_radio">
<li >
    <input type="radio" id="woof_72_55cb07a61800a" class="woof_radio_term" data-slug="elektronik" name="product_cat" value="72">
    <label for="woof_72_55cb07a61800a">Elektronik <span>(812)</span></label>
</li>
<li >
    <input type="radio" id="woof_113_55cb07a741fec" class="woof_radio_term" data-slug="pompa-air" name="product_cat" value="113" checked="checked">
    <label for="woof_113_55cb07a741fec" checked="checked" style="font-weight: bold;">Pompa Air <span>(29)</span></label>
</li>
<li >
    <input type="radio" id="woof_184_55cb07a7513ac" class="woof_radio_term" data-slug="brand" name="product_cat" value="184">
    <label for="woof_184_55cb07a7513ac">Brand <span>(814)</span></label>
</li>
</ul>

Вот мой JavaScript:

$(document).ready(function(){

        $("ul.woof_list").find("li").each(function(index){

        $(this).find('input[checked="checked"]', ".woof_list");

        $( this ).click( function( e ) {
            e.preventDefault();
        // by default, hide all li's
        $( 'ul.woof_list li' ).toggle();
        $( '.woof_is_closed' ).trigger('click');
            // show only the selected li
        $( this ).show();
     });
    console.log($(this).find('input[checked="checked"]', ".woof_list").val());

Я получил значение переключателя, но я не знаю, что мне делать тогда.

Ответ 1

Попробуйте это

$(document).ready(function () {
    $(':radio').on('change', function () {
        $(':radio').not($(this)).closest('li').hide();
    });
});

https://jsfiddle.net/ds3Lfms7/1/

Он будет скрывать все остальные лики при проверке

Ответ 2

На всякий случай, если вы хотите сохранить поведение переключения, так что при повторном нажатии на радио появятся все параметры, которые вы можете попробовать:

$(document).ready(function(){

    $("ul.woof_list li input[type='radio']").click( function( e ) {

        // hide all li (or show all)
        $( 'ul.woof_list li' ).toggle();

        // show only the selected li
        $(this).parent().show();

    });

});

http://jsfiddle.net/optionsit/pa0Lmwpg/2/

Ответ 3

Если вы просите скрывать только непроверенный переключатель, то попробуйте это

демо

 $('input[type=radio]:not(:checked)').hide();

    $('li').click( function () {
        $('input[type=radio]').show();
        $('input[type=radio]:not(:checked)').hide();

    });

Ответ 4

Комбинация ответа @DGS и @Lorenzo. Он использует чистую форму DGS, но имеет функцию Lorenzo toggle(), позволяющую пользователю повторно отображать элементы, щелкая по щелчку. Это просто лучший UX, позволяющий пользователю исправить свой выбор на случай, если он совершил ошибку, изначально.

демо здесь

$(document).ready(function () {
    $(':radio').on('click', function () {
        $(':radio').not($(this)).closest('li').toggle();
    });
});

Где ответ Лоренцо не работает должным образом с проверкой jQuery Mobile 1.4.2, этот ответ делает.