Jquery 通过单击单选按钮的标签以编程方式取消选择单选按钮

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

正如你所看到的，它工作得很好，但只有当你点击单选按钮时。（您也可以通过单击相应的

文本来“选择”按钮。默认情况下，

就是这样操作的。）

但是，我还需要能够通过单击相应的

来“取消选择”单选按钮，这就是我需要帮助的地方

（为什么？因为我正在使用一个插件，它使用覆盖默认单选按钮的

中包含的图像精灵以图形方式改变单选按钮的外观。在我的JSFIDLE中有一行代码，您可以激活它来查看该插件的运行情况。）

我确信我只需要稍微调整一下这个脚本，但我似乎无法使它正确。我相信我只需要在操作相应的单选按钮时“选择”

。通过将按钮的

id

放置在相应

的

属性中，将
附加到按钮上

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);
        }
    });

});

<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>

HTML:

$(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);
        }
    });

});

<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>


选项1

选项2

选项3

选项4

备选案文5

$（文档）.ready（函数（）{
$（“.radio label”）。单击（函数（e）{
var radio=$（this.attr（“for”）；
收音机=$（“#”+收音机）；
if（radio.is（“：checked”））{
e、 预防默认值（）；
radio.removeAttr（“已检查”）；
}
});
});
选项1

选项2

选项3

选项4

备选案文5

$（文档）.ready（函数（）{
$（“.radio label”）。单击（函数（e）{
var radio=$（this.attr（“for”）；
收音机=$（“#”+收音机）；
if（radio.is（“：checked”））{
e、 预防默认值（）；
radio.removeAttr（“已检查”）；
}
});
});
选项1

选项2

选项3

选项4

备选案文5
我也尝试了@Jrod所做的事情，发现插件不起作用。所以我修改了插件。基本上，将此添加到标签中：

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

下面是一个例子。
我也尝试了@Jrod所做的，但发现插件不起作用。所以我修改了插件。基本上，将此添加到标签中：

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

这里有一个.
奇怪的是，不起作用…@alex，但它看起来应该起作用。它用相同的
这个
引用调用相同的函数，所以我不知道。奇怪。我想这是因为单选按钮是在
mouseup
事件之后更新的，而上面的函数是在
mousedown
上调用的，所以它基本上取消了更改。奇怪的是，不起作用…@alex，但看起来应该起作用。它使用相同的
此
引用调用相同的函数，所以我不知道。奇怪。我认为这是因为单选按钮是在
mouseup
事件之后更新的，而上面的函数是在
mousedown
上调用的，因此基本上它取消了更改。您的解决方案是有效的，但由于某种原因，当插件被激活时它会失败。您的解决方案可以工作，但由于某些原因，当插件被激活时，它会失败。这是了不起的工作！是否有方法将参数传递给插件以打开/关闭此功能？因为，我也使用同一个插件用于不允许取消选择的单选按钮。这是一个带有参数
radioToggle
，将其设置为
true
以外的任何值以禁用切换。很抱歉通知您，修改的插件导致了一个新问题<代码>类型错误：表达式“option”[undefined]的结果不是对象。
<代码>自定义输入（）导致错误，但
.customInput（{radioToggle:true}）
和
自定义输入（{radioToggle:false}）不是。当我点击单选按钮时，它会在控制台中弹出。。。尽管有错误，它们似乎仍在运行，但如果可能的话，我希望将其清除（不需要参数）。谢谢对不起，试试这个。。。基本上我改变了这一行：
if（option&&option.radioToggle==true）{
I在一个项目中使用了这个代码片段，最近更新到jQuery 3.1.1，这需要一些更改-bind（）现在不推荐使用，所以我改为使用on（）。另外，removeAttr（），虽然它继续删除输入上的checked属性，但似乎不再影响基础的checked值，因此我必须切换该行以使用input.prop（'checked'，false）而不是input.removeAttr（'checked'）。我希望这能帮助任何希望在更高版本的jQuery中实现这一点的人。这是一项了不起的工作！有没有办法将参数传递给插件以打开/关闭此功能？因为，我也将此插件用于不允许取消选择的单选按钮。这是一个带有参数
radioToggle
，将其设置为任意值的示例除
true
之外，禁用切换。很抱歉通知您，修改的插件导致了一个新问题。
TypeError:expression'option'[undefined]的结果不是对象。
.customInput（）；
导致错误，但
导致错误。customInput（{radioToggle:true}）；
和
.customInput({radioToggle:false}）；
不是。当我单击单选按钮时，它会在控制台中弹出…尽管出现错误，它们似乎仍在运行，但如果可能的话，我想清除它（不需要参数）。谢谢！抱歉，试试这个…基本上我更改了这行：
if（option&&option.radioToggle==true）{
我在一个项目中使用了这个代码段，最近更新到了jQuery 3.1.1，这需要做一些更改-bind（）现在已被弃用，因此我切换到使用on（）。以及removeAttr（），同时继续删除它