网页单选按钮，你可以关闭所有

我想在我的网页上有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>

您想要的不是单选按钮的工作方式。破坏任何UI元素的常规行为通常都不是一个好主意。但是，您可以有一个标记为"clear all"的按钮，并使用一个onclick处理程序来清除所有的单选按钮。我认为这是个好主意:在我看来，必须选择第二个单选按钮来清除第一个选中的状态总是很痛苦的。当然，你不需要jquery来做这些。

重复一遍:我不会像你描述的那样分配一个单选按钮数组来作用于其他按钮。

我会这样做:

$(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/

相关内容

最新更新

热门标签：