CSS：按下與單選按鈕分組的下拉菜單

Question

我正在使用引導程序來設計一組還包括下拉列表的單選按鈕。

當用戶從下拉列表中選擇一個選項時OTHER不作為單選按鈕之一包含在內，所以看起來最后按下的單選按鈕已經被選中，當真的C | D | E C | D | E C | D | E已經。

是否可以將 OTHER 下拉列表作為單選按鈕之一包含在內，以便在用戶選擇 C、D、E 時看起來很沮喪？

如果有幫助，請在此處使用 Codepen： https ://codepen.io/mayagans/pen/qBdaZEJ

 $( document ).ready(function() { $("input[name='test']").change(function(){ $("#results").text($("input[name='test']:checked").val()); }); }); $(".dropdownitems").click(function () { var value = $(this).attr("href"); document.getElementById("results").innerHTML = value });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" data-toggle="buttons"> <label id='RADIO' class="btn btn-primary"> <input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE </label> <label class="btn btn-primary"> <input type="radio" name="test" id="testA" autocomplete="off" value="A">A </label> <label class="btn btn-primary"> <input type="radio" name="test" id="testB" autocomplete="off" value="B">B </label> <div class="btn-group"> <label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <input type="radio" class="" name="test" id="OTHER" autocomplete="off">OTHER<span class="caret"></span> </label> <ul class="dropdown-menu"> <li><a href="C" class="dropdownitems" id="C">C</a></li> <li><a href="D" class="dropdownitems" id="D">D</a></li> <li><a href="E" class="dropdownitems" id="E">E</a></li> </ul> </div> </div> <div id="results"></div>

Answer 1

我不認為單選按鈕是解決這個問題的好方法。 您可以只使用“簡單”按鈕。 無論如何，使用引導程序，您可以將“活動”添加到按鈕（或單選按鈕）類中，以便它顯示為被按下。 帶單按鈕

按下

 <button type="button" class="btn btn-primary active">Click Me!</button>

普通的

 <button type="button" class="btn btn-primary">Click Me!</button>

用你的單選按鈕是一樣的

按下

<label class='btn btn-primary active'>
    <input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
  </label>

普通的

<label class='btn btn-primary'>
    <input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
  </label>

例子

<script>
    $(document).ready(function () {
        let pressedId
        let buttonsId = ["a", "b"] // List of the buttons which are always visible
        let dropDownsButtonId = ["c", "d", "e"] //List of the buttons of the dropdown
        $("button").click(function () {
            if (buttonsId.includes(this.id)) { //First "if" for "always visible" button
                changeClass(this.id)
            } else if (dropDownsButtonId.includes(this.id)) {//Second if for the button of the dropdown
                changeClass("dropDownMenuButton")
            }
        })

        function changeClass(id) {
            if (pressedId !== undefined)
                document.getElementById(pressedId).className = document.getElementById(pressedId).className.replace(" active", "")
            document.getElementById(id).className += " active"
            pressedId = id
        }
    })
</script>

<button type="button" class="btn btn-primary" id="a">a</button>
    <button type="button" class="btn btn-primary" id="b">b</button>
    <div class="dropdown">
        <div class='btn-group'>
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropDownMenuButton"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>
            <ul class='dropdown-menu'>
                <li>
                    <button type="button" class="btn btn-primary" id="c">c</button>
                </li>
                <li>
                    <button type="button" class="btn btn-primary" id="d">d</button>
                </li>
                <li>
                    <button type="button" class="btn btn-primary" id="e">e</button>
                </li>
            </ul>
        </div>
    </div>