jQuery 체크 박스가 체크하지 않음

Question

체크 박스를 체크했을 때 관련 UL이 선택 사항에 따라 더 많은 옵션을 보여줄 수 있도록 폼 설정을했습니다. 작동하지만 사용자가 확인란의 레이블을 클릭 할 때만 작동합니다. 확인란을 클릭하면 예상대로 UL이 확장되지만 상자는 확인되지 않습니다.

자바 스크립트 :

jQuery(document).ready(function() 
    { 
    jQuery('.toggleUL').click(function() 
    { 
     var checkbox = jQuery(this).find('input'); 
     var ul  = jQuery(this).next('ul'); 

     if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); } 

     if (checkbox.attr('checked') == false) 
     { 
      checkbox.attr('checked', true); 
     } 
     else 
     { 
      checkbox.attr('checked', false); 
     } 


     ul.slideToggle('slow'); return false; 
    }); 
    }); 

HTML :

 <label class="toggleUL"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label> 
     <ul style="list-style-type: none; display: none"> 
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li> 
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li> 
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li> 
     </ul> 

이 slideToggle() 함수가 제대로 작동하지 않을했다. 상자/레이블을 클릭하면 UL이 즉시 펼쳐집니다. 내가 멈출 수있는 유일한 방법은 'return false;'를 추가하는 것이 었습니다. 물론 체크 박스가 체크되지 않게한다. 그러므로 checkbox.attr().

해킹 된 코드입니다. 하지만 어떻게 체크 박스를 사용할 수 있습니까? >. <

Answer 1

은 라벨에 사용자가 클릭, 그것은 체크 박스에 영향을 미칠 것입니다 그리고 당신은 체크 박스를 클릭 이벤트 처리기를 추가 할 필요가 그렇게 할 때

<label class="toggleUL" for="quoteWebsite"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label> 
    <ul style="list-style-type: none; display: none"> 
     <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li> 
    </ul> 

레이블을 for="quoteWebsite" 속성을 추가 할 수 있습니다.

jQuery(document).ready(function() 
{ 
    jQuery('#quoteWebsite').click(function() 
    { 
    var checkbox = jQuery(this); 
    var ul  = jQuery(this).closest('label').next('ul'); 

    if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); } 

    if (checkbox.attr('checked') == false) 
    { 
     checkbox.attr('checked', true); 
    } 
    else 
    { 
     checkbox.attr('checked', false); 
    } 


    ul.slideToggle('slow'); return false; 
    }); 
}); 

Answer 2

내가 체크 박스에 직접 클릭 이벤트를 부착하고, 체크 박스와 연결하기 위해 label 요소에 for 속성을 사용하도록 제안

: 나는 당신의 코드를 단순화

<input type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" /> 
<label for="quoteWebsite">xxx</label> 

:

jQuery(function() { 
    jQuery('#quoteWebsite').click(function() { 
     var checkbox = jQuery(this), 
      ul = jQuery(this).siblings('ul'); 

     if (ul.css('display') == 'block') { 
      ul.find('input').attr('checked', false); 
     } 

     ul.slideToggle('slow'); 
    }); 
}); 

클릭 이벤트가 체크 박스에 첨부되었으므로 checked 속성을 수동으로 처리 할 필요가 없습니다. ggling도 취소도하지 않습니다.

위의 예를 확인하십시오. here.

Answer 3

클릭 이벤트가 확인란을 처리 할 때 브라우저를 교차하지 않으므로 확인란의 변경 이벤트를 사용하는 것이 좋습니다. 다음 토론을 확인하십시오. JQuery Click versus Change

CMS의 솔루션에서 한 가지 더 눈에 띄는 것은 작은 문제가 있다는 것입니다. 다음 시나리오를 고려하십시오. 예를 들어, 확인란을 선택하면 옵션이 확장되고 어떤 이유로 페이지가 새로 고쳐집니다. 기본 체크 박스는 선택 상태로 유지되지만 다른 옵션은 축소됩니다. 그렇다면 진정한 갈등을 겪을 것입니다. 확인란을 선택 취소하면 옵션이 확장되고 그 반대가됩니다.

수정 사항이 있습니다. 훨씬 간단하고 깨끗합니다. 그것을 확인하십시오 action.

<label for="quoteWebsite">xxx</label> 
<input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" /> 

    <ul id="options" style="list-style-type: none; display: none"> 
     <li style="margin-left: 20px"> 
      <label> 
       <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" 
        value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"> 
      <label> 
       <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" 
        value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"> 
      <label> 
       <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" 
        value="xxx" />xxx</label></li> 
    </ul> 




    $(document).ready(function(){ 

     $('#quoteWebsite').change(function(){    
      $('#options').slideToggle('slow'); 
     }); 

     if ($('#quoteWebsite').is(':checked')) { 
      $('#options').slideDown(); 
     } else { 
      $('#options').slideUp(); 
     } 
    });