时间戳

首页 > 解决方案 > 在单击“是”单选按钮时显示文本区域并在默认情况下或单击“否”单选按钮时保持隐藏

javascript - 在单击“是”单选按钮时显示文本区域并在默认情况下或单击“否”单选按钮时保持隐藏

问题描述

我有这个 html 代码，并试图弄清楚当我只选择“是”单选按钮时如何使用 java 脚本创建文本区域框。默认情况下或选择“否”时，该文本区域应保持隐藏。

<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label> 
        <input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
</tr>

标签： javascripthtmljquery

解决方案

你可以这样做：

function hideShowJacks(val) {
  if (val == "Y") {
    $("#area").show();
  } else {
    $("#area").hide();
  }
}
#area {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label> 
        <input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
</tr>
</table>
<textarea id="area"></textarea>

如果您更喜欢使用 Javascript 而不是 jQuery：

function hideShowJacks(val) {
  if (val == "Y") {
    document.getElementById("area").style.display = "block";
  } else {

    document.getElementById("area").style.display = "none";
  }
}
#area {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table100" width="150%" cellspacing="2" cellpadding="2">
 <tr>        
    <td class="data_yy yyy1">
       <input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label> 
        <input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
   </td>
   <td class="data_xx xxx1"> Are you in high school?</td>
</tr>
</table>
<textarea id="area"></textarea>

推荐阅读