jquery 여러 라디오 버튼 선택에 대한 요소 표시/숨기기

Question

웹 개발에 특히 익숙합니다. 특히 jQuery라고 부르면 jQuery로 벽돌 벽에 부딪혔습니다.

내가 가지고있는 것은 양식 (선택 목적)과 일련의 페이팔 버튼입니다. 수행해야 할 기능은 표시/숨기기이지만 세 가지 라디오 버튼 중 특정 선택이 선택된 경우에만 표시/숨기기입니다. 세 가지 조합 선택은 해당 페이팔 버튼을 표시하거나 숨기는 것입니다.

단일 양식 라디오 선택으로 표시하거나 숨길 수 있지만 조합에는 표시되지 않습니다.

내가 아직 초보자인데 내 양배추 코딩을 변명해야한다. 코드가 더 최적화 될 수있다. 다행히도 트래픽이 적은 사이트/작은 시장 일 뿐이다. 누구든지 할 수있는 사람에게는 큰 기쁨이다. 도와주세요.

모든 버튼을 잘 숨길 수있었습니다.

<script type="text/javascript"> 

$(document).ready(function(){ 

    //Hide div w/id extra 
     $("#button1,#button2,#button3,#button4,#button5, 
      #button6,#button7,#button8,#button9,#button10, 
      #button11, #button12, #button13, #button14,#button15, 
      #button16,#button17,#button18,#button19,#button20, 
       #button21,#button22,#button23,#button24,     
       #button25,#button26,#button27").css("display","none"); 

}); 

</script> 

아래 스크립트는 다음 형태의 HTML에게 있습니다

<form action="order-lamb" method="post" id="order"> 
    <input type="hidden" name="pack" value="whole" /> 
    <div class="form-item leg option left2"> 
     <h3> Choose from the following Leg options</h3> 
     <p>Choose what leg options you would like:</p> 
     <label for="leg-one-of-each"><input type="radio" name="leg" value="each" id="leg-one-of-each" />1 x Carvery and 1 x Butterfly Legs</label> 
     <p class="or">OR</p> 
     <label for="leg-both-carvery"><input type="radio" name="leg" value="carvery" id="leg-both-carvery" />2 x Carvery Legs</label> 
     <p class="or">OR</p> 
     <label for="leg-both-butterfly"><input type="radio" name="leg" value="butterfly" id="leg-both-butterfly" /> 2 x Butterfly Legs</label> 
    </div> 
    <div class="form-item loin option right2 "> 
     <h3> Choose from the following Loin options:</h3> 
     <p>Choose what loin options you would like:</p> 
     <label for="loin-one-of-each"><input type="radio" name="loin" value="loin-each" id="loin-one-of-each" />1 x Nolsette Loin and 1 x Backstrap &amp; Tenderloin</label> 
     <p class="or">OR</p> 
     <label for="loin-both-nolsette"><input type="radio" name="loin" value="nolsette" id="loin-both-nolsette" />2 x Nolsette Loins </label> 
     <p class="or">OR</p> 
     <label for="loin-both-backstrap"><input type="radio" name="loin" value="backstrap-tenderloin" id="loin-both-backstrap" />2 x Backstrap &amp; Tenderloins </label> 
    </div> 
    <div class="cf"></div> 
    <div class="form-item shoulder option left2"> 
     <h3>Choose from the following Shoulder options:</h3> 
     <p>Choose what shoulder option you would like:</p> 
     <label for="shoulder-one-of-each"><input type="radio" name="shoulder" value="shoulder-each" id="shoulder-one-of-each" /> 1 x Bone and Rolled and 1 x French Danish</label> 
     <p class="or">OR</p> 
     <label for="shoulder-both-bone-and-rolled"><input type="radio" name="shoulder" value="bone-and-rolled" id="shoulder-both-bone-and-rolled" />2 x Bone and Rolled</label> 
     <p class="or">OR</p> 
     <label for="shoulder-both-french-danish"><input type="radio" name="shoulder" value="french-danish" id="shoulder-both-french-danish" />2 x French Danish</label> 
    </div> 
    <div class="form-item included right2"> 
     <h3>You will also get:</h3> 
     <p>These are included:</p> 
     <span class="choice selected">2 x Fully Frenched Racks </span> 
     <p class="or">AND</p> 
     <span class="choice selected">1 x Coastal Spring Lamb Mince Pack </span> </span>  
     <p class="or">AND</p> 
     <span class="choice selected">1 x Coastal Spring Lamb Patty Pack</span> </span> 
    </div> 
    <div class="clear"></div> 
    <div class="align-right" /> 
    <div class="form-item submit"> 
     <p class="error">You must select an option in each category.</p> 
     <input type="image" name="submit" src="images/buttons-and-logos/awaiting-payment.png" id="submit" border="0" /> 
     <p class="paypal">You will receive a confirmation email when your payment has been processed via paypal. <br />Price includes freight and GST.<br /></p> 
    </div> 
</form> 

Answer 1

우선 당신이해야 당신의 부분에 깨끗하고 적은 노력을 유지하기 위해 쉽게 코드를 만들 것 그 버튼에 대한 클래스. 이런 식으로 갈 것입니다.

단추를 만들 때.

<input type="button" class="hideMe"> 

그런 다음 CSS 파일에서 당신은

.hideMe{ 
    display:none; 
} 

을 다음과 같이이 아니면 CSS 파일을 싶지 않는 경우 자바 스크립트 절에서 다음과 같이도 할 수있는 분리해서 것이다. 어쨌든 그 라인을 따라 가십시오.

<script type="text/javascript"> 
$(document).ready(function(){ 
    //Hide div w/id extra 
    $(".hideMe").css("display","none"); 

}); 
</script> 

어쨌든.

둘째, 주요 질문에 답하기 위해 항상 마지막 버튼을 확인하여 3 가지가 모두 선택되었는지 확인할 수 있습니다.

$('input:radio[name="yourRadioNameHere"]').change(function(){ 
     if ($(this).is(':checked') && $(radioButton2).is(':checked') && $(radioButton2).is(':checked')) { 
     // Do whatever you need to do here 
     } 
}); 

나는 거기에 더 우아한 해결책이있을 것이라고 확신하지만, 나는 그 순간 피곤하고 그저 하루를 마무리하려고합니다. 그러나 그것은 효과가있다.

희망이 도움이됩니다.

EDIT : 세 개의 확인란 모두에서 작동하려면 3 개의 if 문을 수행해야합니다. 그러나 코드 반복을 저장하려면 사용자를 위해 검사를 수행하는 함수를 만드십시오. 예 :

function checkChecked(){ 
      if ($(this).is(':checked') && $(radioButton2).is(':checked') && $(radioButton2).is(':checked')) { 
     // Do whatever you need to do here 
     } 
    } 

이 함수를 호출하는 if 문은 3 개입니다. 아래 예.

 $('input:radio[name="yourRadioNameHere"]').change(function(){ 
     checkCheck(); 
}); 

제가 말했듯이 더 많은 가능성이있는 더 나은 해결책이 있지만 이것이 당신의 찾고자하는 것을 얻게 될 것입니다. 예를 들어, 3 if 문을 저장하는 확인란이 변경되었는지 확인하는 함수가 있습니다. 그러나 나는 당신에게 그 구글 검색을 떠날 것이다 :).

희망하는 코드가 도움이되기를 바랍니다.