Question

我的HTML：

<section>
  <radiogroup>
    <form>
      <input name="tabs" type="radio" />
    </form>
    <form>
      <input name="tabs" type="radio" />
    </form>
  </radiogroup>
</section>

jsfiddle

具有相同名称的Radiobutton仍未进行分组，因为它们位于两个不同的<form>元素内。是否可以强制它们进行分组？

EDITED：是的，我知道将它们放在同一个<form>中可以完成这项工作，但我希望保留这种HTML结构。我问这个问题是有原因的。它只包含重现所需的代码，但实际上表单在divs等中的位置更为深远。

Answer 1

您可以强制使用Javascript。
只需将所有单选按钮放在一个数组中，并在单击后立即设置所有单选按钮。

var $radios = $('input[type=radio]');
$radios.change(function(){
  $radios.prop('checked', false);
  $(this).prop('checked', true);
});

这个小提琴中的快速示例https://jsfiddle.net/Lecct8L0/

但是你的HTML Struktur对我来说似乎不合逻辑。

Answer 2

将它们放在相同的形式中：

<section>
    <radiogroup>
       <form>
           <input name="tabs" type="radio" />

           <input name="tabs" type="radio" />
       </form>
   </radiogroup>
</section>

他们将被分组

Updated Fiddle

希望这有帮助！

Answer 3

尝试使用一个<form>代替：

＆＃13;

    <section>
        <radiogroup>
           <form>
             <input name="tabs" type="radio" />
             <input name="tabs" type="radio" />
           </form>
        </radiogroup>
    </section>

＆＃13;

具有相同名称的两个单选按钮不会分组

3 个答案: