jquery - 앵커로 래핑하는 라디오 버튼 확인/스타일 지정

Question

jquery로 라디오 버튼을 사용자 정의하려고합니다. 거기에는 수많은 솔루션이 있지만 각 라디오 버튼마다 다른 이미지를 설정해야한다는 것을 알고 있습니다. 레이블 설명이 없기 때문에 각 라디오 버튼의 의미를 이해해야합니다 (예 : 두 개의 라디오 버튼, "$"가 포함 된 이미지와 기본 통화를 확인하는 "€").

"Stylize"라고하는 간단한 함수를 만듭니다 (사실 Firefox에서만 사용했지만 실제로는 IE6/7 및 주요 브라우저의 이전 버전에서 작동합니다).

기능이 예상대로 작동하지 않는 것처럼 보입니다. 왜냐하면 모든 라디오 버튼에 checked 속성이 설정되어 이상한 결과가 나오기 때문입니다.

Here is the fiddle 간단한 예가 들어 있습니다. 나는 방화 광으로 특성을 분석했다. 실제로 각 라디오 버튼에 다른 클래스 이름을 허용하지 않지만 다음 단계입니다. 보시다시피, 내가 작업하고있는 솔루션은 앵커 태그로 라디오 버튼을 래핑 한 다음 라디오 버튼을 선택하기 위해 onclick 이벤트 핸들러를 바인딩하는 것입니다.

제대로 작동하려면 어떻게해야합니까? 고마워, 알렉스.

Answer 1

여기에 동작하는 예제입니다 : http://jsfiddle.net/bFYW6/2/

귀하의 문제는 아주 간단했다 : 당신은 실제로 라디오 요소를 포장하기 전에 var wrapper = $(radio).parent();을했다. 따라서, .parent()는 <form> 요소에 당신의 radio 요소를 포장하기 위하여 계속하지 <a>을 언급했다.

것은 내가 한 모든 그 두 라인과 짜잔의 순서를 전환했다!

변경할 수있는 또 다른 변경 사항은 실제로 래퍼의 click 이벤트를 바인딩하는 마지막 줄입니다. 보다는 :

$(wrapper).click(function() { 
    $(radio).attr("checked", true); 
}); 

당신은 할 수 :

$(wrapper).click(function() { 
    $(this).children().attr("checked", true); 
}); 

위의 예에서 $(this)을 사용함으로써, 항상 아이의 인 radio 요소를 찾을 수 있습니다. 이렇게하면 Stylize() 함수를 한 번만 호출 할 수 있습니다 (Stylize("#radio1, #radio2"); 또는 Stylize("input[type=radio]");).

예 : http://jsfiddle.net/bFYW6/6/

마지막 지점으로, 당신은 당신의 Stylize() 기능에 대한 자본 'S'를 사용할 수 없습니다. 자바 스크립트에서 대문자로 함수를 시작하는 것은 일반적으로 그것이 당신이 아닌 클래스를위한 생성자 함수임을 시사합니다.