使用复选框显示隐藏表

Question

我有两个表，我要尝试做的是，如果用户选中“ Cookies”单选按钮，则会显示一个cookie表。与另一个相同，如果选中了糖果单选按钮，则会发生相同的情况。

我的代码无法正常工作吗？

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>

Answer 1

只需更正以下其他条件即可：

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>

Answer 2

您必须解决if条件。

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>

Answer 3

我建议也使用onchange函数代替onclick函数

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

以及Java语言更改

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';
  }
}

Answer 4

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;
}