체크 박스와 클로저를 대체 할 js 코드

Question

다음 자바 스크립트 (프로토 타입 1.6) 코드는 페이지의 모든 체크 박스를 숨기고 일부 CSS 스타일과 div 이벤트를 클릭하여 가짜 체크 박스 역할을하는 div 요소를 삽입합니다. 또한 동일한 이벤트를 트리거하기 위해 체크 박스 옆에 (또는 이전) 레이블을 찾습니다.

div (fake_el) 자체를 클릭하면 모든 것이 예상대로 작동하지만 레이블을 사용하여 동일하게 시도하면 한 번만 작동합니다. 그 후 엘은 변하지 않을 것입니다. 엘 (el)이 가치 매개 변수가되는 것처럼 말입니다.

여기에 아이디어가 있습니까?

$$('input[type=checkbox]').each(function(el) { 
     if (el.visible()) { 
      var fake_el = new Element('div', { className:'checkbox checkbox_' + el.checked }); 
      var label = (el.next() != null && el.next().tagName === 'LABEL' && el.next().readAttribute('for') === el.id) ? el.next() : undefined; 
      label = (el.previous() != null && el.previous().tagName === 'LABEL' && el.previous().readAttribute('for') === el.id) ? el.previous() : label; 
      var action = function(el) { 
       el.checked = (el.checked) ? false : true; 
       fake_el.className = 'checkbox checkbox_' + el.checked; 
      } 

      fake_el.observe('click', function() { action(el); }); 
      if (label != null) { label.observe('click', function() { c.log(el); action(el); c.log(el); }); } 
      el.insert({ after:fake_el }).hide(); 
     } 
    }); 

Answer 1

몇 가지 항목이 변경되어 이에 대한 jsFiddle이 생성되었습니다. 무엇보다 먼저 c.log을 console.log으로 변경해야만했습니다. :) 그 후, 변경된 유일한 것은 insert과 함께 나를 위해 일하지 않았기 때문에 div가 추가 된 방법이었습니다. 몇 가지 테스트 데이터를 설정하고 멀리갔습니다.

EDIT : 아마도 두 개의 체크 박스 사이에 비 레이블 태그가없고 혼란스러워할까요? 알림 나는 사이에 label과 다음 체크 박스가 있습니다. 어쩌면 그렇게 할 필요가있을 것입니다.