问题隐藏未选中的单选按钮

我想隐藏未选中的单选按钮，只显示选中的按钮：

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

我得到了单选按钮的值，但我不知道我该怎么做。

12943

2017-08-12 09:03

起源

$('input[type=checkbox]:not(:checked)').hide() ？ - Toni Michel Caubet

目前还不清楚你想要什么。当您单击其中一个单选按钮时，您想要隐藏未检查的其他2个，或者？ - Loyalar

你不清楚，因为你在伪就绪事件中设置你的逻辑，所以如果你想要它默认，只需使用CSS↯↯↯ - A. Wolff

input[type=radio]:not(:checked) { display: none; } - Abhitalks

那么在用户点击选择后，他们无法更改它？听起来像一个非常令人困惑和令人沮丧的用户界面。不要这样做。 - Jim Garrison

答案:

尝试这个

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

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

当你检查一个时，它会隐藏所有其他的li

2017-08-12 09:10

谢谢这是解决问题！ - Haryono Sariputra

如果你想保持你的切换行为，那么再次点击收音机将显示你可能想要尝试的所有选项：

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

2017-08-12 09:35

虽然其他答案也是正确的，但是允许用户重新选择是否犯了错误，因为此代码允许。这只是更好的用户体验。 - dberm22

是的，但可能需要在实施时进行一些调整。我离开了 $( '.woof_is_closed' ).trigger('click'); 因为它是问题的一部分，但是当用户想要重新选择时会触发。编辑：我刚刚删除了该行，请记住点击功能上的每条指令都将在“重新选择”时执行 - Lorenzo Pirondini

如果您要求仅隐藏未选中的单选按钮，请尝试此操作

演示

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

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

    });

2017-08-12 09:26

结合的 @ DGS的回答和 @Lorenzo的回答。它使用DGS的清洁形式，但具有Lorenzo的切换（）功能，允许用户通过单击重新单击来重新显示项目。这只是更好的用户体验，允许用户在最初犯错时纠正他的选择。

在这里演示

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

Lorenzo的答案在jQuery Mobile 1.4.2检查中不能正常工作，这个答案确实如此。

2017-08-12 19:12

问题 隐藏未选中的单选按钮

答案:

热门问题

问题隐藏未选中的单选按钮