1

我有这个表格：

<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，它们都会被勾选。一旦我在某个组中选择了一个单选按钮，我想要它来取消选择除我选择的组之外的所有其他组中的单选按钮。

非常感谢您提前。

4

4 回答 4

1

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

<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>
于 2013-06-19T00:05:19.957 回答
1

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

于 2013-06-19T08:09:06.810 回答
1

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

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

于 2013-06-18T23:57:55.757 回答
0

通过 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>
于 2013-06-19T00:06:37.783 回答