Question

我的单选框有一个小问题，并且在此论坛中尚未找到任何解决方案。

应仅激活1个单选框。 如果我单击第二个单选按钮，则第一个仍处于选中状态，而当我也选中第三个单选按钮时，则全部选中，并且我无法取消选中其中一个。希望有人能帮助我。

    <input type="radio" checked class="frame_inner_1_open" id="frame_inner_1_open">
    <input type="radio" class="frame_inner_2_open" id="frame_inner_2_open">
    <input type="radio" class="frame_inner_3_open" id="frame_inner_3_open">

    <label for="frame_inner_1_open" id="frame_inner_1_icon_toggle">
      <div class="frame_inner_1_icon"></div>
    </label>


    <label for="frame_inner_2_open" id="frame_inner_2_icon_toggle">
      <div class="frame_inner_2_icon"></div>
    </label>


    <label for="frame_inner_3_open" id="frame_inner_3_icon_toggle">
      <div class="frame_inner_3_icon"></div>
    </label>

Answer 1

您希望您的浏览器如何理解这些单选按钮彼此对应？仅仅是因为它们彼此相邻显然不能神奇地告诉浏览器这种情况。

要实现此目的，您需要设置name属性，并在所有链接的单选按钮上均等地设置它：

<input type="radio" name="foo" checked class="frame_inner_1_open" id="frame_inner_1_open">
<input type="radio" name="foo" class="frame_inner_2_open" id="frame_inner_2_open">
<input type="radio" name="foo" class="frame_inner_3_open" id="frame_inner_3_open">

阅读有关如何使用html控件的文档。

Answer 2

为其设置相同的name属性

Learn here

    <input type="radio" name="rdb" checked class="frame_inner_1_open" id="frame_inner_1_open">
    <input type="radio" name="rdb" class="frame_inner_2_open" id="frame_inner_2_open">
    <input type="radio" name="rdb" class="frame_inner_3_open" id="frame_inner_3_open">

    <label for="frame_inner_1_open" id="frame_inner_1_icon_toggle">
      <div class="frame_inner_1_icon"></div>
    </label>


    <label for="frame_inner_2_open" id="frame_inner_2_icon_toggle">
      <div class="frame_inner_2_icon"></div>
    </label>


    <label for="frame_inner_3_open" id="frame_inner_3_icon_toggle">
      <div class="frame_inner_3_icon"></div>
    </label>

单选框的CSS问题

2 个答案: