javascript - 单击 "Yes"单选按钮时显示文本区域，默认情况下或单击 "No"单选按钮时保持隐藏状态

Question

我有这个 html 代码，并试图弄清楚当我仅选择"is"单选按钮时如何使用 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>

Answer 1

你可以这样做:

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>