【发布时间】：2011-12-09 17:29:53
【问题描述】：
我正在寻找一个允许我取消选择单选按钮的脚本。我在 SO 上找到了一个并在这里实现了它......
http://jsfiddle.net/sparky672/YFsVK/1/
如您所见，它运行良好，但仅当您单击单选按钮本身时。 （您也可以通过单击相应的<label> 文本来“选择”一个按钮。这是<label> 默认的操作方式。）
但是，我还需要能够通过单击相应的<label> 来“取消选择”一个单选按钮，这就是我需要帮助的地方。
（为什么？因为我正在使用一个插件，它使用包含在覆盖默认单选按钮的 <label> 中的图像精灵以图形方式改变单选按钮的外观。我的 jsFiddle 中有一行可以激活来查看插件的运行情况。）
我确定我只需要稍微调整一下这个脚本，但我似乎无法让它正确。我相信我只需要在操作相应的单选按钮时“选择”<label>。通过将按钮的id 放置在相应<label> 的for 属性中，<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>
【问题讨论】：
-
奇怪的是，this 不起作用...
-
@alex，但它看起来应该工作。
-
它使用相同的
this引用调用相同的函数，所以我不知道。很奇怪。 -
我认为这是因为单选按钮在
mouseup事件之后更新，而上面的函数是在mousedown上调用的，所以基本上它取消了更改。
标签： jquery radio-button label fieldset