通过单击单选按钮的标签，以编程方式取消其选择
我正在寻找一个脚本，允许我取消选择一个单选按钮。我在上面找到了一个然后在这里实现了..。
http://jsfiddle.net/sparky672/YFsVK/1/
正如你所看到的，它工作的很好，但只有当你点击单选按钮本身。(您也可以通过单击相应的<label>文本来“选择”按钮。默认情况下，这就是<label>的操作方式。)
但是，我也需要能够“取消选择”一个单选按钮，只需点击相应的<label>，这就是我需要帮助的地方。
(为什么？因为我使用的插件图形化地改变了单选按钮的外观，使用的是包含在<label>中的图像精灵，它覆盖了默认的单选按钮。在我的jsFiddle中有一行你可以激活来查看插件的工作。)
我确信我只需要稍微修改一下这个脚本，但我似乎无法正确地理解它。我相信我只需要“选择”<label>，同时操作相应的单选按钮。<label>通过将按钮的id放置在相应的<label>的for属性中而“附加”到按钮上。
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>回答 2
Stack Overflow用户
发布于 2011-10-18 01:58:33
我也尝试了@Jrod所做的事情，并注意到插件不起作用。所以我修改了插件。基本上将其添加到标签中：
.bind('mouseup', function(){
if ($(this).is('.checked') && input.is(':radio')) {
setTimeout(function(){
label.removeClass('checked focus');
input.removeAttr('checked').blur();
}, 0);
}
});这是一个更新演示。
Stack Overflow用户
发布于 2011-10-18 01:44:15
<!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>https://stackoverflow.com/questions/7801448
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号