jQuery를 사용하여 숨겨진 라디오 버튼을 선택했지만 onclick이 작동하지 않음

Question

jQuery를 사용하여 웹 사이트의 실제 라디오 버튼을 숨기고 이미지 (사용자 정의 라디오 버튼)로 바꿉니다. jQuery를 사용하면 사용자가 숨겨진 라디오 버튼을 "선택"하는 이미지를 클릭 할 수 있습니다. 실제 라디오 버튼에는 HTML 코드에서 onclick 이벤트가 첨부되어 있지만 이미지 (jQuery)를 통해 라디오 버튼을 선택하면 실제 라디오 버튼이 선택을 감지하지 못하고 onclick 이벤트가 아닌 것입니다 활성화되었습니다.

기본 라디오 버튼 (jQuery 없음)을 사용할 때 onclick 이벤트 스크립트가 작동하는지 확인할 수 있습니다. 사용자 정의 라디오 버튼에 jQuery를 사용하면 작동하지 않습니다. 여기 내 코드는 지금까지 있습니다 :

HTML 코드

<div class="prettyRadiobuttons clearfix"> 
<ul id="store"> 

<li><input name="store" type="radio" id="store_1" value="store_1" onclick="dynamic_Select('code.php', this.value)" /> 
<label for="store_1">Store 1</label></li> 

<li><input name="store" type="radio" id="store_2" value="store_2" onclick="dynamic_Select('code.php', this.value)" /> 
<label for="store_2">Store 2</label></li> 

</ul> 
</div> 

는 jQuery를

$(document).ready(function() { 
     //Adds the "radiolist" class to the div containing the radio buttons 
     $("div.prettyRadiobuttons").addClass("radiolist"); 

     //Adds the html for the custom radio button (image) to each radio button (li) 
     $("div.radiolist li").append('<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>'); 

     //Handles selecting a radio button 
     $(".radiolist .radio-select").click(
      function(event) { 
       event.preventDefault(); 
       var $boxes = $(this).parent().parent().children(); 
       $boxes.removeClass("selected"); 
       $(this).parent().addClass("selected"); 
       $(this).parent().find(":radio").attr("checked","checked"); 
      } 
     ); 

     //Handles de-selecting a radio button 
     $(".radiolist .radio-deselect").click(
      function(event) { 
       event.preventDefault(); 
       $(this).parent().removeClass("selected"); 
       $(this).parent().find(":radio").removeAttr("checked"); 
      } 
     ); 
    }); 

(사용자 정의 라디오 버튼의 경우) jQuery를에있는 다른 클래스는 다른 이미지를 지정하는 데 사용됩니다

라디오 버튼이 선택되었는지 여부에 따라 CSS를 통해.

jQuery 코드는 onclick 이벤트가없는 상태에서 작동하며 onclick 이벤트는 jQuery를 사용하지 않고 작동하지만 둘 다 함께 작동하도록 할 수는 없습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

Answer 1

어딘가에 ".click()"을 추가하십시오.

$(this).parent().find(":radio").click().attr("checked","checked"); 

그리고

$(this).parent().find(":radio").click().removeAttr("checked"); 

참고 나는 두 번 연속으로 변경 저장하는 속성을 설정하기 전에 그 일을하고 있습니다.

Answer 2

그것은 당신의 문제가 무엇인지 나에게 완전히 분명하지 않다, 그러나 나는 몇 가지 제안이 있습니다

1. 사용 클릭() 대신 ("확인", "확인") ATTR 의를 - 효과는 동일하고 (라디오가 선택됩니다), onclick 핸들러가 호출됩니다; 또는 :

2. jQuery 코드에서 dynamic_Select을 직접 호출하십시오.

Answer 3

라디오 입력의 상위 클래스를 토글하려면. (label.radio)는 IE9/10에서도 작동하는 CSS3 스타일링을 사용하여이 label.radio의 스타일을 지정한다고 가정 해 보겠습니다. 또한 동적으로 삽입 된 내용에서이 기능을 사용하려면 클릭 한 번으로 문서에 바인딩해야합니다. 라디오 그룹에있는 다른 라디오의 부모를 '선택 해제'하고 싶습니다.클릭 이벤트에 대한 다음

$('input[type="radio"]:checked').closest('.radio').addClass('checked'); 
$('input[type="radio"]:disabled').closest('.radio').addClass('disabled'); 

:

$(document).on('click','input[type="radio"]', function(){  
    var name = $(this).attr('name');   
    $('input:radio[name="'+name+'"]').closest('.radio').removeClass('checked');   
    if($(this).prop('checked')){ 
     $(this).closest('.radio').addClass('checked');  
    } 
}); 

html로 예 :

<div class="radio-group">    

    <label class="radio"> 
     <input type="radio" name="henk" value="Yes" checked="checked"> 
     <span>Abracadabra</span> 
    </label> 

    <label class="radio"> 
     <input type="radio" name="henk" value="Yes" disabled="disabled" > 
     <span>Abracadabra.</span> 
    </label> 

    <label class="radio"> 
     <input type="radio" name="henk" value="Yes" > 
     <span>Simsalabim</span> 
    </label> 

</div> 

내가 바이올린에 full example을 추가 docready 최초

는 초기 상태를 설정합니다.