多个单选按钮组答案

【问题标题】：Multipe radio buttons groups多个单选按钮组
【发布时间】：2013-06-15 08:58:48
【问题描述】：

我有这个表格：

<div id="div1">
  <form>
  <input type="radio" name="r1" id="r1" value="r1 value 1" />
  <input type="radio" name="r1" id="r1" value="r1 value 2" />
  <input type="radio" name="r1" id="r1" value="r1 value 3" />

  <input type="radio" name="r2" id="r2" value="r2 value 1" />
  <input type="radio" name="r2" id="r2" value="r2 value 2" />
  <input type="radio" name="r2" id="r2" value="r2 value 3" />

  <input type="radio" name="r3" id="r3" value="r3 value 1" />
  <input type="radio" name="r3" id="r3" value="r3 value 2" />
  <input type="radio" name="r3" id="r3" value="r3 value 3" />
  </form>
</div>

单选按钮组的数量是可变的。

一旦最终用户选择某个组中的任何单选按钮，我如何取消选择任何其他单选按钮，因为目前如果我选择 r1 值 1，然后选择 r3 值 3，他们都将被打勾。一旦我在某个组中选择了一个单选按钮，我想要它来取消选择除我选择的组之外的所有其他组中的单选按钮。

非常感谢您。

【问题讨论】：

给它们起一个相同的名字——单选按钮应该是这样工作的。
您遇到的第一个问题是IDs need to be unique，您多次使用相同的
@Xotic750 - 这不是真正的问题。分组基于名称。这不是有效的 HTML，但是，这并不能解决他的问题。
我想为它们保留不同的 ID，以满足页面上的其他需求。
@AhmedElGamil 你知道document.getElementsByTagName(...)吗？应该不需要多个具有相同 ID 的元素。

标签： javascript jquery html

【解决方案1】：

所有单选按钮不能在同一个组中是否有原因？将它们放在相同的组名下很容易解决。如果没有，使用简单的 jQuery 单击处理程序取消选择所有其他单选按钮将起作用。

此外，您的示例中有重复的 ID。不确定这是故意的还是错误的，但您也应该修复它。

【讨论】：

我需要它们保持不同的 ID。我尝试了一些 javascript 函数来取消选择其他单选按钮，但我必须手动输入 id 名称。无论页面稍后可能发生的更改，我都希望它完成。

【解决方案2】：

这样你就有了你的小组。但是，一旦您选择另一个收音机，它就会取消选择任何其他收音机。 id，名字变了。

<div id="div1">
  <form>
<div>Group 1
  <input type="radio" name="r" id="g1r1" value="r1 value 1" />
  <input type="radio" name="r" id="g1r2" value="r1 value 2" />
  <input type="radio" name="r" id="g1r3" value="r1 value 3" />
</div>
<div>Group 2
  <input type="radio" name="r" id="g2r1" value="r2 value 1" />
  <input type="radio" name="r" id="g2r2" value="r2 value 2" />
  <input type="radio" name="r" id="g2r3" value="r2 value 3" />
</div>
<div>Group 3
  <input type="radio" name="r" id="g3r1" value="r3 value 1" />
  <input type="radio" name="r" id="g3r2" value="r3 value 2" />
  <input type="radio" name="r" id="g3r3" value="r3 value 3" />
</div>
  </form>
</div>

【讨论】：

每个组的名称必须不同，因为将在提交时分配一个值。

【解决方案3】：

通过 jQuery，您所要求的绝对是可能的。这是确切的解决方案：

$('#div1 form input:radio').change(function() {
  // Grabs all other radio buttons in the form, and
  // deselects all but the one which was clicked on.
  $('#div1 form input:radio').not(this).prop('checked', false);
});

此外，任何 HTML 元素之间的 ID 必须 100% 唯一。虽然这不会阻止上述代码的工作，但如果您尝试根据其 ID（例如 $('#r1')）选择一个项目，则只会返回其中一个元素，而不是所有元素。

完整实现：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#div1 form input:radio').change(function() {
                    // Grabs all other radio buttons in the form, and
                    // deselects all but the one which was clicked on.
                    $('#div1 form input:radio').not(this).prop('checked', false);
                });
            });
        </script>

        <div id="div1">
            <form>
                <input type="radio" name="r1" id="r1" value="r1 value 1" />
                <input type="radio" name="r1" id="r1" value="r1 value 2" />
                <input type="radio" name="r1" id="r1" value="r1 value 3" />

                <input type="radio" name="r2" id="r2" value="r2 value 1" />
                <input type="radio" name="r2" id="r2" value="r2 value 2" />
                <input type="radio" name="r2" id="r2" value="r2 value 3" />

                <input type="radio" name="r3" id="r3" value="r3 value 1" />
                <input type="radio" name="r3" id="r3" value="r3 value 2" />
                <input type="radio" name="r3" id="r3" value="r3 value 3" />
            </form>
        </div>
    </body>
</html>

对于 IE 6、7 和 8 的兼容性：

Replace:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
With:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

【讨论】：

经过测试，在 Firefox / chrome 上工作 .. 但由于某种原因不能在 IE 上工作？
不在 ie 中工作？我会进一步研究并在几分钟内更新您。
你测试的是哪个版本的ie？在 10 中工作，目前无法访问任何其他版本...
是的，是的 .. 成功了 :) .. 非常感谢您的帮助。
很高兴我能帮上忙！ ps我赞成你的问题，所以现在你坐在舒适的0。那里有一些仇恨者。学习如何提出正确的问题是学习如何编程的一部分。人们也编织得太多。

【解决方案4】：

更改您的代码，使所有单选按钮的名称属性都相同。而且你不能为多个元素拥有相同的 id。

【讨论】：