Hide the unchecked radio button

Question

I want to make the unchecked radio buttons hide, and just display the checked one:

<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>

Here is my 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());

I got the value of the radio button, but I do not know what should I do then.

Answer 1

Try this

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

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

It will hide all the other li's when you check one

Answer 2

Just in case you want to keep the toggle behavior you had, so clicking the radio again will bring up all options you may want to try that :

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

If you asking for hiding only unchecked radio button then Try this

demo

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

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

    });