从选定的某些复选框中显示 Div 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

你需要一个 else 结构

$(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（我假设一个简单的结构，更改为您需要的） 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>

jQuery

$(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();
        }
    });
});

CSS

.bundledivs {
    display:none;
}

小提琴：http://jsfiddle.net/JyG9Q/