레이블을 클릭하여 프로그래밍 방식으로 라디오 버튼 선택 취소

라디오 버튼을 선택 취소 할 수있는 스크립트를 찾고있었습니다. 당신이 좋은 일하고 있지만 당신은 라디오 버튼 자체를 클릭하면 볼 수 있듯이 나는레이블을 클릭하여 프로그래밍 방식으로 라디오 버튼 선택 취소

... SO에 하나를 발견하고 이곳을 구현했습니다. (해당 <label> 텍스트를 클릭하여 버튼을 "선택"할 수도 있습니다. 이것은 <label>이 기본적으로 작동하는 방식입니다.)

그러나 라디오 버튼을 클릭하여 "선택 취소"할 수 있어야합니다 그 해당 <label>, 그리고 내가 도움이 필요한 곳입니다.

(이유는 기본 라디오 버튼을 덮고있는 <label>에 포함 된 이미지 스프라이트를 사용하여 라디오 버튼의 모양을 그래픽으로 변경하는 플러그인을 사용하고 있기 때문입니다. 내 jsFiddle 내에 활성화 할 수있는 행이 있습니다. 플러그인의 실제 동작을 참조하십시오.)

나는이 스크립트를 약간 조정할 필요가있을 것이라고 확신하지만 정확한 것으로 보이지 않습니다. 해당 라디오 버튼을 조작하면서 <label>을 "선택"해야한다고 생각합니다. <label>은 해당 <label>의 for 특성에 단추의 id을 배치하여 단추에 "연결"됩니다.

자바 스크립트 :

$(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_ work처럼 보입니다. – 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

'radioToggle' 매개 변수가있는 [업데이트 된 버전] (http://jsfiddle.net/Mottie/YFsVK/5/)입니다. 토글을 사용하지 않으려면'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

레이블을 클릭하여 프로그래밍 방식으로 라디오 버튼 선택 취소

답변

관련 문제