Question

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

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

这是我的JavaScript：

<Extension()>
Public Sub UnBold(Of T As Control)(cc As Control.ControlCollection)
    For Each c As Control In cc
        If Not TypeOf c Is T AndAlso c.GetType.GetProperty("Font") IsNot Nothing Then
            Dim RegularFont As New Font(c.Font.FontFamily, c.Font.Size, FontStyle.Regular)
            c.Font = RegularFont
        ElseIf c.HasChildren Then
            UnBold(Of T)(c.Controls)
        End If
    Next
End Sub

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

Answer 1

试试这个

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

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

当你检查一个

时，它会隐藏所有其他的li

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/

Answer 3

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

demo

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

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

    });

Answer 4

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

demo here

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

如果Lorenzo的答案在jQuery Mobile 1.4.2检查中无效，那么这个答案确实如此。

隐藏未选中的单选按钮

4 个答案: