隐藏未选中的单选按钮。

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

我已经获得了单选按钮的值，但不知道接下来该做什么。

- Haryono Sariputra

---

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

不清楚您的意思。当您点击单选按钮中的一个时，您想要隐藏其他两个未被选中的按钮吗？请确认。 - Loyalar

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

那么用户一旦点击了一个选项，就不能更改了吗？听起来像是一个非常令人困惑和沮丧的用户界面。不要这样做。 - Jim Garrison

@JimGarrison，你说得对，也许我会为这种情况添加重置按钮。 - Haryono Sariputra

Answer 1

试试这个

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

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

当您勾选一个时，它将隐藏所有其他li。

- DGS

---

谢谢，这解决了问题！ - Haryono Sariputra

Answer 2

如果您想保留之前的切换行为，即再次点击单选按钮将显示所有选项，则可以尝试以下操作：

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

- Lorenzo Pirondini

---

虽然其他答案也是正确的，但请允许用户在犯错时重新选择，正如这段代码所允许的一样。这只是更好的用户体验。 - dberm22

是的，但在实现时可能需要进行一些微调。我保留了 $( '.woof_is_closed' ).trigger('click');，因为它是问题的一部分，但当用户想要重新选择时，它将被触发。编辑：我刚刚删除了那行代码，请记住每个点击函数上的指令都将在“重新选择”时执行。 - Lorenzo Pirondini

Answer 3

如果您只想隐藏未选中的单选按钮，请尝试以下方法：

演示

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

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

    });

- akash

Answer 4

这是 @DGS's answer 和 @Lorenzo's answer 的结合体。它使用了 DGS 更清晰的形式，但具有 Lorenzo 的 toggle() 功能，允许用户通过重新点击来重新显示项目。这只是更好的用户体验，允许用户在初次选择时纠正错误。

这里有演示

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

当使用 jQuery Mobile 1.4.2 时，Lorenzo 的答案不能正常工作，但是这个答案可以。

- dberm22