Question

我想在我的网页上有3个收音机类型按钮。如果我单击一个按钮，它会打开，组中的另外两个按钮关闭。到目前为止很正常。但是，如果我点击当前的“开启”按钮，我希望它切换为“关闭”。即能够关闭组中的所有按钮。

我已经看过jQuery UI按钮，但是我无法弄清楚如何实现它。这可能吗？或者是否有其他一些提供此功能的javascript库？

普通jQuery单选按钮的代码示例......

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $("#radio").buttonset();
  });

</script>
</head>
<body style="font-size:62.5%;">

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

</body>
</html>

Answer 1

如您所知，您想要的不是单选按钮的工作方式。颠覆任何UI元素的通常行为通常不是一个好主意。但是，您可以使用一个标记为“全部清除”的按钮，其中包含一个清除所有单选按钮的onclick处理程序。我认为这是一个好主意：必须选择第二个单选按钮来清除第一个选中的状态，这总是很痛苦。对你而言，你不需要jquery来做这件事。

重复一下，但是：我不会像你描述的那样指定其中一个单选按钮数组来对其他人进行操作。

Answer 2

我会这样做的：

$(window).ready(function() {

    var currentRadio = new Array();
    $('input:radio').bind('click', function() {
        var name = $(this).attr('name');
        if(name in currentRadio && currentRadio[name] === $(this)[0]) {
            $(this).removeAttr('checked');
            currentRadio[name] = false;
        } else {
            currentRadio[name] = $(this)[0];
        }
    });

});

这是几组单选按钮的通用解决方案（按名称分组）。

这里有效：http://jsfiddle.net/LkBYc/

Web收音机按钮，您可以在其中关闭所有关闭

2 个答案: