用radio控制<tr>的隐藏和显示问题_radio 关联 tr-优快云博客

本文介绍了一个使用JSP和JavaScript实现的表单案例，该案例中根据用户选择的选项（评估是否通过），动态地显示指派第三方机构的选择框或退回原因的文本框。文章详细展示了如何使用内联样式和JavaScript函数控制不同表单元素的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp页面代码

 1 <tr>
 2                                     <th nowrap="nowrap" width="10%" height="50px"
 3                                         style="text-align: center;">是否评估通过</th>
 4                                     <td width="40%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
 5                                         type="radio" id="yesorno" name="yesorno" value="1"
 6                                         onclick="yes()">是</input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 7                                         <input type="radio" id="yesorno" name="yesorno" value="0" onclick="no()" selected = "false">否</input>
 8                                     </td>
 9                                 </tr>
10                                 <tr id="third" >
11                                     <th nowrap="nowrap" height="50px" style="text-align: center;">指派第三方机构</th>
12                                     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
13                                         id="ThirdPart" name="ThirdPart"
14                                         class="easyui-combobox input160"
15                                         data-options="valueField:'id',textField:'text',editable: false, panelHeight: 120,
16                                         url:'${ctx}/rescue/surver/send/comlist.action?code=${userDep.sysDepartment.sysDepartmentId}',method:'get'" />
17 
18                                     </td>
19                                 </tr>
20                                 <tr id = "reason" style="display: none">
21                                     <th nowrap="nowrap" height="100%" style="text-align: center;">退回原因</th>
22                                     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea
23                                             id="reason" name="reason" class="easyui-validatebox"
24                                             cols="157"
25                                             data-options="required:true, validType: 'length[0,500]'"
26                                             maxlength="500"></textarea>
27                                     </td>
28                                 </tr>

js代码

 1 //显示第三方机构
 2 function  yes(){
 3     $("#reason").css('display', 'none');
 4     $("#third").css('display', 'block');
 5 }
 6 //显示退回原因
 7 function no(){
 8     $("#third").css('display', 'none');
 9     $("#reason").css('display', 'block');
10 }