0

有人可以帮我吗...我正在考虑使用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);
            });
        });
4

1 回答 1

1

您需要为所有收音机指定相同的名称，以便只能选择其中一个。

<input name="foo" type="radio" />
<input name="foo" type="radio" />
<input name="foo" type="radio" />
<input name="foo" type="radio" />
于 2012-12-21T11:44:48.060 回答