Question

I have a form with a checkbox. The checkbox, when checked, makes a table (which is inside a div) hide and is replaced with a block of text that says they checked the box.

Inside that same div, there is a select box. If the user selects anything other than ‘——‘ some of the table rows hide and are replaced with some text saying they made a selection.

However, if the user first makes a selection and then checks the checkbox, the goal is to have the div hide the whole table and be replaced with only one block of text – namely the text that says you’ve checked the box.

Convoluted, ya, but for the project it makes sense.

So here’s some basic markup for clarity (some pseudo-code):

<checkbox input id="cBox">

<div id="myDiv">
  <table id="myTable">
    <select_box id="mySelect">
    <tr class="myTRClass">...some stuff...</tr>
    <tr class="myTRClass">...some stuff...</tr>
    <tr class="myTRClass">...some stuff...</tr>
  </table>

  <div id="replaceTable">
    ...some text telling user they checked the box
  </div>
  <div id="replaceRows" class="replaceMyRows>
    ..some text telling user they made a selection
  </div>
</div>

my jQuery for the select box (which should hide just the rows of the table). This code works:

t = $("#mySelect").val();
if (t == "") {
    $(".myTRClass").hide();
    $(".replaceMyRows").show();
}
else {
    $(".replaceMyRows").hide();
    $(".myTRClass").show();
}

Now, here’s my jQuery for the check box (this should hide the whole table):

    t = $( '#cBox' )
    if ($(t).attr('checked')) {
        $("#myTable").hide();
        $("#replaceTable").show();
    }
    else {
        $("#replaceTable").hide();
        $("#myTable").show();
    }

Now here’s my problem: These two sets of jQuery work fine on their own, but when I start to mix things together, I have problems.

For example: if I make a selection from the select box, the table rows hide and are replaced with my text. Perfect. But now, in this state, if I then check the check box to hide the whole table (which currently has some of its rows hidden) what I get is a hidden table, but both sets of text are present (The text saying “you made a selection” and the text that says “you checked the box”).

I can’t seem to get the right combo of .show() and .hide() to make this work. The result for my example should be: Hide the table, Hide the rows, Hide the text that says I hid the rows, then show the text that says I checked the checkbox.

Sorry if this is convoluted, it just seems an odd situation that should be straight forward.

Thanks for any help 🙂

---

Edit: Changed my title.

---

Edit #2

I’ve added a fiddle here
When it opens, the select box has ‘—–‘ chosen, so the table rows are hidden. Try selecting something else (rows show up). Try checking the box (whole table hides). However, try selecting ‘—–‘ FIRST then check the box – both texts show up. With this situation, I only want the “you checked the box” text to show up.

Ideas?

Answer 1

I am not sure here but seems like you should change your markup a little bit to manage.

Here’s new html:

<input type="checkbox" id="cBox">

<div id="myDiv">
  <div class="hideByChkBx">
    <select id="mySelect" />
    <table id="myTable">
      <tr class="myTRClass">...some stuff...</tr>
      <tr class="myTRClass">...some stuff...</tr>
      <tr class="myTRClass">...some stuff...</tr>
    </table>
    <div id="replaceRows" class="replaceMyRows>
      ..some text telling user they made a selection
    </div>
  </div>
  <div id="replaceTable">
    ...some text telling user they checked the box
  </div>
</div>

Here is javascript:

//For select box
t = $("#mySelect").val();
if (t == "") {
    $(".myTRClass").hide();
    $(".replaceMyRows").show();
} else {
    $(".replaceMyRows").hide();
    $(".myTRClass").show();
}

//for checkbox
t = $( '#cBox' )
if ($(t).attr('checked')) {
    $(".hideByChkBx").hide();
    $("#replaceTable").show();
}
else {
    $(".hideByChkBx").show();
    $("#replaceTable").hide();
}