Javascript 多个单选按钮组_Javascript_Jquery_Html

Javascript 多个单选按钮组

javascript jquery html

Javascript 多个单选按钮组,javascript,jquery,html,Javascript,Jquery,Html,我有以下表格： <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" />

我有以下表格：

<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单击处理程序取消选择所有其他单选按钮就可以了

另外，在您的示例中有重复的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>

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

更改代码，使所有单选按钮的“名称”属性相同。您不能对多个元素使用相同的id。

给它们取相同的名称-单选按钮就是这样工作的。您遇到的第一个问题是，您使用的是多个相同的名称times@Xotic750-这不是真正的问题。分组基于名称。这不是有效的HTML，但是，这不能解决他的问题。我想用不同的ID保存它们，以满足页面上的其他需要。@AhmedElGamil你知道吗？应该不需要使用相同ID的多个元素。我需要它们作为不同的ID保留。我尝试了一些javascript函数来取消选择其他单选按钮，但我必须手动输入id名称。我希望它能够完成，而不考虑稍后在页面中可能发生的更改。已测试，在Firefox/chrome上工作。。但出于某种原因没有在IE工作？没有在IE工作？我会进一步研究它，并在一分钟内更新你。你在用什么版本的ie测试它？在10中工作，现在无法访问任何其他版本…是的是的。。成功了：。。非常感谢你的帮助。很高兴我能帮忙！ps我把你的问题投了更高的票，所以现在你坐在一个舒适的0。外面有一些仇恨者。学习如何提出正确的问题是学习如何编程的一部分。人们也编织太多。每个组的名称必须不同，因为在提交时会指定一个值。