Display Div from certain checkboxes selected 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');

}
   });
   });

So I have searched all over the internet for the answer but couldn't found anything! The code is working but when a person selects two checkboxes it does that function and does the function of a single checkbox.

So like if I select #TWO and #THREE it does all the functions. How do I tell if both are selected only execute that one function.

What's your relevant HTML structure? – David Thomas Mar 31 '14 at 21:27 — David Thomas, Mar 31 '14 at 21:27

Barbara Laird · Answer 1 · 2014-04-02T15:17:17.340

You need an else structure

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

   });
 });

EDIT - to hide the divs (I assumed a simple structure, change to what you need) 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;
}

Fiddle: http://jsfiddle.net/JyG9Q/

That seems to work better. I am basically have 3 checkboxes and depending on what they select will open a new div. Well now if they select, and then select again, it still shows the old stuff??? — itssamduh, Apr 01 '14 at 13:34

Display Div from certain checkboxes selected JQUERY

1 Answers1