多个单选按钮组

Multipe radio buttons groups

本文关键字：单选按钮      更新时间：2023-09-26

我有这样一个表单:

<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，它们都将被选中。我希望一旦我在某个组中选择了一个单选按钮，它就会在我选中的那个组旁边的所有其他组中取消选择单选按钮。

非常感谢。

是否有原因所有的单选按钮不能在同一组?将它们放在相同的组名称下是一个简单的解决方案。如果没有，使用一个简单的jQuery click处理程序来取消选中所有其他的单选按钮就可以了。

同样，在您的示例中有重复的id。不知道这是故意的还是错误的，但你也应该修复它。

这样你就有了你的组。但一旦你选择了另一个电台，它就会取消选择任何其他电台。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>

修改代码，使所有单选按钮的name属性相同。并且不能在多个元素中使用相同的id

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

对于ie6, 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>
相关文章：