Скрыть кнопку непроверенных радио

Question

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

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

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

Answer 1

Попробуйте

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

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

Это будет скрыть все остальные Ли, когда вы проверяете один

Answer 2

Если вы задаете для сокрытия только непроверенную радиокнопку затем Попробуйте

demo

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

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

    }); 

Answer 3

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

$(document).ready(function(){ 

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

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

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

    }); 

}); 

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

Answer 4

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

demo here

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

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