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

显示选中JQUERY的某些复选框

1 个答案: