JQuery控制input的隐藏和显示

最新推荐文章于 2024-09-02 11:08:53 发布

原创最新推荐文章于 2024-09-02 11:08:53 发布 · 1.7w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JAVA #JS #jquery #J2EE #jsp

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript的radio控件实现输入显示与隐藏的动态控制，包括出差、脱产学习、事假、病假、年休假、婚假等不同场景的应用。

radio:

<tr>
                    <th class="red">选择类型：</th>
                    <td colspan="3">
   						
                     	<input name="strAppliType" type="radio" value="01" onclick="display(this.value)" checked>出差  
                     	<input name="strAppliType" type="radio" value="03" onclick="display(this.value)" >脱产学习  </br>
                     	<input name="strAppliType" type="radio" value="04" onclick="display(this.value)" >事假  
                     	<input name="strAppliType" type="radio" value="05" onclick="display(this.value)" >病假  
                     	<input name="strAppliType" type="radio" value="06" onclick="display(this.value)" >年休假  </br>
                     	<input name="strAppliType" type="radio" value="08" onclick="display(this.value)" >婚假  
                     	</div>
                     	
                    </td>
                </tr>

input:

<tr id="isshow">
   				  	<th>岗　　位：</th>
               		<td >
                		<input type='text'  name='strStation' id='strStation' class="text_ipt2" >
               		</td>
               		<th>工作时间：</th>
               		<td>
                		<input type='text'  name='strWorkTime' id='strWorkTime'  class="text_ipt2" > 年
               		</td>
               	</tr>

在JavaScript中通过radio的选择来控制input的显示与隐藏

//类型选择后出现请假类型
function display(n) {
	if(n==01||n==03){
		$("#isshow").find("th:eq(1)").show();
		$("#isshow").find("td:eq(1)").show();
		$("#isshow").find("td:eq(0)").attr("colspan","1");

		
	}else if(n==06){
		$("#isshow").find("td:eq(0)").attr("colspan","3");
		$("#isshow").find("th:eq(1)").hide();
		$("#isshow").find("td:eq(1)").hide();

	}else{ 
		$("#isshow").find("td:eq(0)").attr("colspan","3");
		$("#isshow").find("th:eq(1)").hide();
		$("#isshow").find("td:eq(1)").hide();
	} 
}

页面初始化时input的显示与隐藏

<script type="text/javascript">
showtable.loader('TextInput01', 'tr', 'evenOver');
$("#isshow").find("th:eq(1)").show();
$("#isshow").find("td:eq(1)").show();