예쁜 체크 박스 jQuery 셀렉터 문제

Question

div에있는 차단 된 링크로 기본 기본 체크 박스를 대체하려고합니다. 버튼으로 표시하고 클릭하면 클래스를 토글합니다. 실제로 클래스 작동을 토글하지만 checked 속성을 토글하는 방법도 나와 있습니다.

이 내 HTML 코드

<div class="editor-field"> 
    <div class="pretty-checkbox"> 
     <input checked="checked" id="IsLegalFirm" name="IsLegalFirm" type="checkbox" value="true" /> 
     <input name="IsLegalFirm" type="hidden" value="false" /> 
     <a href="#" class="checkbox selected">IsLegalFirm </a> 
    </div> 
</div> 
<div class="editor-field"> 
    <div class="pretty-checkbox"> 
     <input checked="checked" id="IsTaxable" name="IsTaxable" type="checkbox" value="true" /> 
     <input name="IsTaxable" type="hidden" value="false" /> 
     <a href="#" class="checkbox selected">IsTaxable </a> 
    </div> 
</div> 

Html.Checkbox() 도우미를 사용하는 경우 ASP.NET MVC 그것을 소개하기 때문에 숨겨진 input가있다 아래를 참조하십시오. 물론 이것은 단지 checked에 켜졌지만 이미 확인 때 그것을 취소하지 않습니다

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".checkbox").click(
     function (event) { 
      event.preventDefault(); 
      $(this).toggleClass("selected"); 
          // this needs a change 
      $(this).parent().find(":checkbox").attr("checked", "checked"); 
     }); 
    }); 
</script> 

:

이 내 JS이다. 그리고 나는 그것이 양쪽 입력에 그것을해야한다고 생각합니다.

누군가 나를 올바른 선택기/솔루션으로 도울 수 있습니까?

Answer 1

$(document).ready(function() { 
    $(".checkbox").click(
    function (event) { 
     event.preventDefault(); 
     $(this).toggleClass("selected"); 
     var realCheckbox = $(this).parent().find(":checkbox"); 
     // the problem with this line is that this only toggles the value 
     // of the checked attribute from checked="" to checked="checked" 
     // and vice versa and I had problems with this in HTML5, 
     // so I rewrote it as below 

     // realCheckbox.attr("checked", realCheckbox.is(":checked") ? "" : "checked"); 

     if (realCheckbox.is(":checked")) { 
      realCheckbox.removeAttr("checked"); 
     } 
     else { 
      realCheckbox.attr("checked", "checked"); 
     } 
    }); 
}); 

또는 당신은 어쩌면 그냥 realCheckbox.click()

Answer 2

특정하지 같은 링크의 목적을 체크 박스의 "클릭"이벤트를 강제 할 수 있지만 전통적으로 텍스트는 라벨과 위해를 사용하여 체크 박스에 바인딩 속성. 다음은 그 예입니다.

<div class="editor-field"> 
    <div class="pretty-checkbox"> 
     <input checked="checked" id="IsLegalFirm" name="IsLegalFirm" type="checkbox" value="true" /> 
     <input name="IsLegalFirm" type="hidden" value="false" /> 
     <a href="#"><label for="IsLegalFirm" class="checkbox selected">IsLegalFirm </label></a> 
    </div> 
</div> 
<div class="editor-field"> 
    <div class="pretty-checkbox"> 
     <input checked="checked" id="IsTaxable" name="IsTaxable" type="checkbox" value="true" /> 
     <input name="IsTaxable" type="hidden" value="false" /> 
     <a href="#"><label for="IsTaxable" class="checkbox selected">IsTaxable </label></a> 
    </div> 
</div> 

나는 링크를 남겼습니다. 다음은 함께 플레이 할 jsFiddle입니다 : http://jsfiddle.net/bK3ju/1/. 라벨을 체크 박스에 연결하는 데 자바 스크립트가 필요하지 않습니다.

밥