Question

有人可以在这里帮助我吗？我在考虑使用http://tympanus.net/Tutorials/UIElements/SearchBox/找到的功能，但它使用复选框而不是收音机。我希望下拉列表显示4个单选按钮，用户应该只能选择一个选项。我尝试了各种选项但它不起作用。我将使用最新的jquery - 1.8

我尝试使用prop，attr并阅读论坛但没有任何帮助。非常感谢您的知识。

我的HTML位于

之下

    <div class="content">
        <h1>UI Elements</h1>
        <div class="box">
            <h2>Search Box with Filter Demo</h2>
            <form id="ui_element" class="sb_wrapper">
                <p>
                    <span class="sb_down"></span>
                    <input class="sb_input" type="text"/>
                    <input class="sb_search" type="submit" value=""/>
                </p>
                <ul class="sb_dropdown" style="display:none;">
                    <li class="sb_filter">Filter your search</li>
                    <li><input type="radio"/><label for="all"><strong>All Categories</strong></label></li>
                    <li><input type="radio"/><label for="Automotive">Automotive</label></li>
                    <li><input type="radio"/><label for="Baby">Baby</label></li>
                    <li><input type="radio"/><label for="Beauty">Beautys</label></li>

                </ul>
            </form>
        </div>
    </div>
    <div>
    </div>

原始脚本在下面 -

        $(function() {
            /**
            * the element
            */
            var $ui         = $('#ui_element');

            /**
            * on focus and on click display the dropdown, 
            * and change the arrow image
            */
            $ui.find('.sb_input').bind('focus click',function(){
                $ui.find('.sb_down')
                   .addClass('sb_up')
                   .removeClass('sb_down')
                   .andSelf()
                   .find('.sb_dropdown')
                   .show();
            });

            /**
            * on mouse leave hide the dropdown, 
            * and change the arrow image
            */
            $ui.bind('mouseleave',function(){
                $ui.find('.sb_up')
                   .addClass('sb_down')
                   .removeClass('sb_up')
                   .andSelf()
                   .find('.sb_dropdown')
                   .hide();
            });

            /**
            * selecting all checkboxes
            */
            $ui.find('.sb_dropdown').find('label[for="all"]').prev().bind('click',function(){
                $(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
            });
        });

Answer 1

您需要为所有无线电设备指定相同的名称，以便只能选择其中一个。

<input name="foo" type="radio" />
<input name="foo" type="radio" />
<input name="foo" type="radio" />
<input name="foo" type="radio" />

用于搜索过滤器的Jquery单选按钮

1 个答案: