JQuery에서 특정 확인란의 버튼을 표시하거나 숨기는 방법?

Question

JQuery에서 확인란을 사용할 때 문제가 있습니다. 사용자가 draft_checkbox 만 체크하면 버튼을 보여주고 싶습니다. 사용해보기 초안 체크 박스를 클릭하십시오. 하지만, 초안 체크 박스에서만 표시하거나 숨길 수 있습니다. 다른 확인란을 클릭해도 계속 표시됩니다. 난 그냥 사용자가 초안 확인란을 선택하면 버튼을 표시하고 싶습니다. 사용자가 둘 다 확인하면 숨기고 싶습니다. 여기

내 스크립트, 여기

<script type="text/javascript"> 
     $(document).ready(function() {     
      $('#draft').click(function() { 
       if($("#draft").is(':checked')){ 
        $('#btnApprovepo').css('visibility','visible');      
       }else{ 
        $('#btnApprovepo').css('visibility','hidden');            
       } 
      }); 
     }); 
</script> 

<div id="status_div"> 
    <input type="checkbox" class="po_status" name="status" id="draft" value="d" checked="checked"/> Draft<br /> 
    <input type="checkbox" class="po_status" name="status" id="pending" value="n" /> Pending <br /> 
    <input type="checkbox" class="po_status" name="status" id="submit" value="s" /> Submitted <br /> 
    <input type="checkbox" class="po_status" name="status" id="pAck" value="c" /> Partial Ack <br /> 
    <input type="checkbox" class="po_status" name="status" id="ack" value="a" /> Acknowledged <br /> 
    <input type="checkbox" class="po_status" name="status" id="partial" value="p" /> Partial Delivered <br /> 
    <input type="checkbox" class="po_status" name="status" id="delivered" value="e" /> Delivered <br /> 
    <input type="checkbox" class="po_status" name="status" id="void" value="v" /> Void <br /> 
    <input type="checkbox" class="po_status" name="status" id="reject" value="r" /> Reject <br /> 
</div> 

내 버튼,

<input type='button' value='Button' name='Button' id='btnApprovepo' /> 

Answer 1

바이올린 :

http://jsfiddle.net/XqXL9/2/

$('.po_status').click(function() { 
    if($(".po_status:checked").length === 1 && $("#draft").is(":checked") == true){ 
     $('#btnApprovepo').show(); 
    } else { 
     $('#btnApprovepo').hide(); 
    } 
}); 

몇 가지 모범 pratices : 정확한 비교를 위해

1. 사용 트리플 ===.
2. 은 일치하는 태그 대신 클래스를 사용합니다.
3. 가시성으로 보이지 않게되지만 공간을 차지합니다. Is that what you need?. 이 한 줄의 코드

Answer 2

을이보십시오, 여기에

내가 알것 해달라고 jsfiddle http://jsfiddle.net/iamrmin/zCkKc/

$(document).ready(function() {     
    $('#status_div input[type=checkbox]').click(function() { 
     if($("#status_div :checked").length == 1 && $("#draft").is(":checked") == true) 
      $('#btnApprovepo').show(); 
     else 
      $('#btnApprovepo').hide() 
    }); 
}); 

입니다 w visibility css를 사용한 이유는 무엇입니까? 요구 사항 일 수 있습니다. 가시성을 전환하려면 .show() 및 .hide()을 사용하는 것이 좋습니다.

Answer 3

난 당신이 이런 식으로 할 수 있다고 생각이 경우에도 중괄호 사이

묶으 코드는 ... 여기 은 W3 스쿨 비록 FIDDLE

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#draft").click(function(){ 
      if($(this).is(':checked')){ 
       $('#btnApprovepo').css("visibility","visible"); 
      } 
      else 
      { 
       $('#btnApprovepo').css("visibility","hidden"); 
      } 
     }); 
    }); 
</script>