JQuery控制input的隐藏和显示

最新推荐文章于 2023-02-08 19:58:31 发布

毕竟我很菜

最新推荐文章于 2023-02-08 19:58:31 发布

阅读量1.7w

点赞数

分类专栏： JQuery 文章标签： JAVA JS jquery J2EE jsp

本文链接：https://blog.csdn.net/hdblocal/article/details/51075751

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

radio:

<tr>
                    <th class="red">选择类型：</th>
                    <td colspan="3">
   						
                     	<input name="strAppliType" type="radio" value="01" οnclick="display(this.value)" checked>出差  
                     	<input name="strAppliType" type="radio" value="03" οnclick="display(this.value)" >脱产学习  </br>
                     	<input name="strAppliType" type="radio" value="04" οnclick="display(this.value)" >事假  
                     	<input name="strAppliType" type="radio" value="05" οnclick="display(this.value)" >病假  
                     	<input name="strAppliType" type="radio" value="06" οnclick="display(this.value)" >年休假  </br>
                     	<input name="strAppliType" type="radio" value="08" οnclick="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();