Question

我有这样的表格：

<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然后选择{{1}值3，两个都将被勾选。一旦我在某个组中选择一个单选按钮，取消选择我选择的那个组旁边的所有其他组的单选按钮，我想要它。

非常感谢你。

Answer 1

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

此外，您的示例中有重复的ID。不确定这是出于意图还是错误，但你也应该解决这个问题。

Answer 2

这样你就有了你的团队。但是一旦你选择另一个无线电，它就会取消选择任何其他无线电。 id's，名字改变了。

<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>

Answer 3

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

Answer 4

通过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);
});

此外，ID必须在任何HTML元素之间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>

多个单选按钮组

4 个答案: