1

我正在寻找一个允许我取消选择单选按钮的脚本。我在 SO 上找到了一个并在这里实现了它......

http://jsfiddle.net/sparky672/YFsVK/1/

如您所见，它工作得很好，但只有当您单击单选按钮本身时。（您也可以通过单击相应的<label>文本来“选择”一个按钮。这是<label>默认情况下的操作方式。）

但是，我还需要能够通过单击相应的单选按钮来“取消选择”单选按钮<label>，这就是我需要帮助的地方。

（为什么？因为我正在使用一个插件，它使用包含在<label>默认单选按钮上的图像精灵以图形方式改变单选按钮的外观。我的 jsFiddle 中有一行可以激活以查看该插件的运行情况.)

我确定我只需要稍微调整一下这个脚本，但我似乎无法让它正确。我相信我只需要<label>在操作相应的单选按钮时“选择”。A通过将按钮的 放置在相应的属性中<label>来“附加”到按钮。idfor<label>

JavaScript：

$(document).ready(function() {

    $('input[name="amount"]').mousedown(function(e) { // allows radio button deselection
        var $self = $(this);
        if ($self.is(':checked')) {
            var uncheck = function() {
                setTimeout(function() {
                    $self.removeAttr('checked');
                }, 0);
            };
            var unbind = function() {
                $self.unbind('mouseup', up);
            };
            var up = function() {
                uncheck();
                unbind();
            };
            $self.bind('mouseup', up);
            $self.one('mouseout', unbind);
        }
    });

});

HTML：

<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" /><label for="radio-1" title="">Option 1</label><br />
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label><br />
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label><br />
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label><br />
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
</fieldset>
4

2 回答 2

3 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(".radio-label").click(function(e) {

            var radio = $(this).attr("for");
            radio = $("#" +radio );
            if(radio.is(":checked")) {
                e.preventDefault();
                radio.removeAttr("checked");
            }

        });

    });
</script>
</head>
<body>
<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" /><label class="radio-label" for="radio-1" title="">Option 1</label><br />
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label class="radio-label" for="radio-2" title="">Option 2</label><br />
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label class="radio-label" for="radio-3" title="">Option 3</label><br />
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label class="radio-label" for="radio-4" title="">Option 4</label><br />
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label class="radio-label" for="radio-5" title="">Option 5</label>
</fieldset>
</body>
</html>
于 2011-10-18T01:44:15.770 回答
2

我还尝试了@Jrod 所做的，发现插件不起作用。所以我修改了插件。基本上将其添加到标签中：

.bind('mouseup', function(){
    if ($(this).is('.checked') && input.is(':radio')) {
        setTimeout(function(){
            label.removeClass('checked focus');
            input.removeAttr('checked').blur();
        }, 0);
    }
});

这是一个更新的演示。

于 2011-10-18T01:58:33.437 回答