JavaScript中通过点击单选框动态显示和隐藏组件

最新推荐文章于 2023-02-23 22:56:46 发布

y_bccl27

最新推荐文章于 2023-02-23 22:56:46 发布

阅读量1.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/y_bccl27/article/details/90672657

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<body>
    <table>
        <tr>
	    <td class="tt" title="项目类别"> 项目类别</td>
	    <td>
	        <input type="radio" value="1" name="demo1">政府
	        <input type="radio"	value="2" name="demo1">企业
	        <input type="radio" value="3" name="demo1">个人
	    </td>
        </tr>
        <tr>
	    <td></td>
	    <td>
	           <input type="radio" value="1" name="demo2">企业投资-新建、改建、扩建
	        <input type="radio"	value="2" name="demo2">企业投资-其他项目
	    </td>
        </tr>
    </table>
    <table>
        <tr>
	    <td class="tt" title="项目类别"> 项目类别</td>
	    <td>
		<input type="radio" value="1" name="demo3">政府
		<input type="radio"	value="2" name="demo3">企业
		<input type="radio" value="3" name="demo3">个人
	    </td>
	</tr>
	<tr>
	    <td></td>
	    <td>
		<input type="radio" value="1" name="demo4">企业投资-新建、改建、扩建
		<input type="radio"	value="2" name="demo4">企业投资-其他项目
	    </td>
	</tr>
    </table>
    <table>
	<tr>
	    <td class="tt" title="项目类别"> 项目类别</td>
	    <td>
		<input type="radio" value="1" name="demo5">政府
		<input type="radio"	value="2" name="demo5">企业
		<input type="radio" value="3" name="demo5">个人
	    </td>
	</tr>
	<tr>
	    <td></td>
	    <td>
		<input type="radio" value="1" name="demo6">企业投资-新建、改建、扩建
		<input type="radio"	value="2" name="demo6">企业投资-其他项目
	    </td>
	</tr>
    </table>
</body>

对应的JS如下：

<script src="jquery-1.8.0.min.js"></script>
<script>
$(function(){
    bindBusinessInvestment();
});
function bindBusinessInvestment() {
    var xmlbList=$("td[title='项目类别']");
    var xmlb;
    for(var i=0;i<xmlbList.size();i++){
	xmlb=xmlbList.eq(i);
	var brotherTd=xmlb.next();
	var inputList=brotherTd.children();
	var trParent= xmlb.parent();
	for(var j=0;j<inputList.size();j++){
	    var inputObject=inputList.eq(j);
	    if(j!=1){
		inputObject.click(function(){
		    var next= $(this).parent().parent().next();			
	            next.hide();
	        });
	    }else{
	        inputObject.click(function(){
		    var next= $(this).parent().parent().next();
		    next.show();
	        });
	    }        	
	}
	var brotherTr=trParent.next();
	brotherTr.hide();
    }
}
</script>

y_bccl27

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中通过点击单选框动态显示和隐藏组件

<body> <table> <tr> <td class="tt" title="项目类别"> 项目类别</td> <td> <input type="radio" value="1" name="demo1">政府 <inp...
复制链接

扫一扫

专栏目录