以編程方式取消選中單選按鈕的標籤

我一直在尋找一個腳本，允許我取消選擇一個單選按鈕。我找到一個關於SO這裏實現了它......以編程方式取消選中單選按鈕的標籤

正如你可以看到它的工作不錯，但只有當你點擊單選按鈕本身。（您也可以通過單擊相應的<label>文本「選擇」按鈕，這是怎麼<label>默認運行。）

不過，我還需要通過只單擊要能「取消」單選按鈕其對應<label>，這是我需要一些幫助。

（爲什麼？因爲我使用的是一個插件，它使用包含在<label>中的圖像精靈來圖形化地改變單選按鈕的外觀，它覆蓋默認的單選按鈕，在我的jsFiddle中有一行可以激活看看插件的行動。）

我相信我只需要調整這個腳本有點，但我似乎無法得到它正確的。我相信我只需在操作相應的單選按鈕時「選擇」<label>。 A <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>

來源

2011-10-18 Sparky

奇怪的是，[this]（http://jsfiddle.net/YFsVK/2/）不起作用... – alex

@alex，但它看起來像_should_工作。 – Sparky

它調用相同的'this'引用相同的功能，所以我不知道。奇怪的。 – alex

我也試了一下@Jrod做，發現該插件沒有工作。所以我修改了插件。基本上將此添加到標籤：

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

這是updated demo。

來源

2011-10-18 01:58:33 Mottie

這是非常棒的工作！有沒有辦法將參數傳遞給插件來打開/關閉這個功能？因爲，我也使用這個插件作爲我不想取消選擇的單選按鈕。 – Sparky

這裏是一個[更新版本]（http://jsfiddle.net/Mottie/YFsVK/5/），其參數爲'radioToggle'，將其設置爲'true'以禁用切換。 – Mottie

非常好！謝謝！ – Sparky

<!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-18 01:44:15 Jrod

您的解決方案可以正常工作，但由於某種原因，插件被激活時會失敗。 http://jsfiddle.net/sparky672/YFsVK/3/ – Sparky

以編程方式取消選中單選按鈕的標籤

回答

相關問題