표시 확인란을 선택한 특정 확인란 JQUERY

Question

$(document).ready(function() { 
    $('#bundlesubmit').click(function() { 

if ($("#three").is(':checked')) { 
     $("#bundleDropDown1").toggle(); 
     alert ('hey this is the three only one'); 
} 
if ($("#two").is(':checked')) { 
     $("#bundleDropDown2").toggle(); 
     alert ('hey this is the second one'); 
} 
if ($("#two").is(':checked') == true && $("#three").is(':checked') == true) { 
     $("#bundleDropDown").toggle(); 
     alert ('hey this is the two options'); 

} 
    }); 
    }); 

그래서 인터넷을 통해 답변을 검색했지만 아무 것도 찾을 수 없었습니다! 코드가 작동하지만 사람이 두 개의 확인란을 선택하면 해당 기능을 수행하고 단일 확인란의 기능을 수행합니다.

#TWO 및 #THREE를 선택하면 모든 기능을 수행합니다. 두 항목 모두 하나의 기능 만 실행하도록 선택되었는지 어떻게 알 수 있습니까?

Answer 1

당신은 다른 구조를

$(document).ready(function() { 
    $('#bundlesubmit').click(function() { 

    if ($("#two").is(':checked') == true && $("#three").is(':checked') == true) { 
     $("#bundleDropDown").toggle(); 
     alert ('hey this is the two options'); 

    } 
    else if ($("#three").is(':checked')) { 
     $("#bundleDropDown1").toggle(); 
     alert ('hey this is the three only one'); 
    } 
    else if ($("#two").is(':checked')) { 
     $("#bundleDropDown2").toggle(); 
     alert ('hey this is the second one'); 
    } 

    }); 
}); 

편집이 필요 - div의를

$(document).ready(function() { 
    $('#bundlesubmit').click(function() { 
     $(".bundledivs").hide(); 
     if ($("#two").is(':checked') && $("#three").is(':checked')) { 
      $("#bundleDropDown").show(); 
     } else if ($("#three").is(':checked')) { 
      $("#bundleDropDown1").show(); 
     } else if ($("#two").is(':checked')) { 
      $("#bundleDropDown2").show(); 
     } 
    }); 
}); 

jQuery를

HTML

<label for="two">Two 
    <input type="checkbox" id="two" /> 
</label> 
<label for="three">Three 
    <input type="checkbox" id="three" /> 
</label> 
<button id="bundlesubmit">Bundle Submit</button> 
<div id="bundleDropDown" class="bundledivs">Bundle Drop Down</div> 
<div id="bundleDropDown1" class="bundledivs">Bundle Drop Down 1</div> 
<div id="bundleDropDown2" class="bundledivs">Bundle Drop Down 2</div> 

(나는 당신이 필요로 변경하는 간단한 구조를 가정) 숨길

CSS

.bundledivs { 
    display:none; 
} 

바이올린 : http://jsfiddle.net/JyG9Q/