[英]Programmatically deselecting a radio button by clicking its label
我一直在寻找可以取消选择单选按钮的脚本。 我在SO上找到了一个并在这里实现了...
http://jsfiddle.net/sparky672/YFsVK/1/
如您所见,它工作得很好,但是仅当您单击单选按钮本身时才如此。 (您也可以通过单击相应的<label>
文本来“选择”按钮。这是<label>
默认情况下的操作方式。)
但是,我还需要能够仅通过单击相应的<label>
来“取消选择”单选按钮,这是我需要帮助的地方。
(为什么?因为我使用的插件使用<label>
中包含的图像精灵以图形方式更改了单选按钮的外观,该图像覆盖了默认的单选按钮。jsFiddle中有一行可以激活以查看插件)。
我确定我只需要稍微调整一下该脚本,但似乎无法正确执行。 我相信我只需要在操作相应的单选按钮时“选择” <label>
。 甲<label>
是通过将“附接”到一个按钮id
的按钮在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>
<!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>
我还尝试了@Jrod所做的事情,发现该插件无法正常工作。 所以我修改了插件。 基本上将其添加到标签中:
.bind('mouseup', function(){
if ($(this).is('.checked') && input.is(':radio')) {
setTimeout(function(){
label.removeClass('checked focus');
input.removeAttr('checked').blur();
}, 0);
}
});
这是更新的演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.