Show Hide Table Using Checkbox

Question

I have two tables and what im trying to do is if user checked on radio button "Cookies" a table for cookies will appear. Same with the other one, if radio button for candies is checked then the same thing happen.

Somehow my code is not working?

https://jsfiddle.net/es7aj8bw/1/

function streamverify(x) {
  if (x == 0)
    document.getElementById('upstream_tab').style.display = 'block';
  else if (x == 1)
    document.getElementById('downstream_tab').style.display = 'block';
  else
    document.getElementById('upstream_tab').style.display = 'none';
  document.getElementById('downstream_tab').style.display = 'none';
  return;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}

<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>

michaelitoh · Accepted Answer · 2019-03-05 13:59:41Z

2

Just correct your if else condition like following:

function streamverify(x) {
  if (x == 0) {
    document.getElementById('upstream_tab').style.display = 'block';
    document.getElementById('downstream_tab').style.display = 'none';
  } else {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  }
  return;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}

<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>

edited Mar 5, 2019 at 13:59

michaelitoh

2,34016 silver badges26 bronze badges

answered Mar 5, 2019 at 13:58

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cloned Over a year ago

you should wrap the text next to the input fields with a label (that's something everyone on this question should do, everyone just copied OPs html without optimizing it)

Sudhir Ojha Over a year ago

@cloned we are here to answer not for code review. If you want code review, then please visit Stack Exchange

cloned Over a year ago

Strictly speaking OP is asking for a correct way to do this and strictly speaking the above is semantic incorrect HTML. It was just a tip for writing better code, no need for Stack Exchange

michaelitoh · Accepted Answer · 2019-03-05 13:58:47Z

You have to fix your if conditions.

function streamverify(x) {
  if (x == 0) {
    document.getElementById('downstream_tab').style.display = 'none';
    document.getElementById('upstream_tab').style.display = 'block';
  } else if (x == 1) {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  }

}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}

<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>

satwik · Accepted Answer · 2019-03-05 14:06:58Z

1

Please refer to the link for the updated one

function streamverify(x){
   document.getElementById('upstream_tab').style.display='none';
   document.getElementById('downstream_tab').style.display='none';
   if(x == 0)
     document.getElementById('upstream_tab').style.display='block';
   else if (x == 1)
     document.getElementById('downstream_tab').style.display='block';
   return;
}

answered Mar 5, 2019 at 14:06

satwik

6075 silver badges13 bronze badges

Comments

michaelitoh · Accepted Answer · 2019-03-05 16:57:14Z

1

I suggest to use also the onchange function instead of onclick function

<input type="radio" name="rad1" value="0" onchange="streamverify(this);">Cookies
<input type="radio" name="rad1" value="1" onchange="streamverify(this);">Candies

and for Javascript change

function streamverify(x) {
  if (x.value == 0) {
    document.getElementById('upstream_tab').style.display = 'block';
    document.getElementById('downstream_tab').style.display = 'none';
  } else if (x.value == 1) {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  } else {
    document.getElementById('upstream_tab').style.display = 'none';
    document.getElementById('downstream_tab').style.display = 'none';
  }
}

edited Mar 5, 2019 at 16:57

michaelitoh

2,34016 silver badges26 bronze badges

answered Mar 5, 2019 at 14:05

Ciccio

4684 silver badges17 bronze badges

Collectives™ on Stack Overflow

Show Hide Table Using Checkbox

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related