javascript 根据radio隐藏table
有三个radio按钮,，一个是投诉，一个是建议，一个是报修，在页面里有三个table分别是投诉、建议、报修。如何控制选择投诉的时候只显示投诉的table，选择建议的时候显...
有三个radio按钮,，一个是投诉，一个是建议，一个是报修，在页面里有三个table分别是投诉、建议、报修。如何控制选择投诉的时候只显示投诉的table， 选择建议的时候显示建议的table，选择报修的时候只显示报修的table，默认选择投诉，一开始的时候默认显示投诉的table，用Javascript写。如果要定义变量的话把定义变量的过程也写出来，代码越完整越好，最好附上解释。三个按钮分别是radio_0、radio_1、radio_2，依次对应table_0、table_1、table_2。
展开
2个回答
展开全部
您好：jQuery(js)代码：
<script src="jquery-1.8.0/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input").first().attr("checked", "true"); //默认让第一个radio选中。
$("table").eq(0).css("display", "block"); //默认让第一个table显示。
$("input").live("click", function () { //给radio绑定click事件。
var radioIndex = $(this).index(); //得到这个radio的索引
$("table").eq(radioIndex).css("display", "block").siblings().css("display", "none");
//让选中索引值的table显示，其他table隐藏。
});
});
</script>
HTML代码：
<body>
<input type="radio" name="radio_0" id="Radio0" value="投诉"/>投诉
<input type="radio" name="radio_0" id="Radio1" value="建议"/>建议
<input type="radio" name="radio_0" id="Radio2" value="报修"/>报修
<div>
<table style=" background-color:Red; display:none;">
<tr><td>Table_0</td></tr>
<tr><td>投诉:</td></tr>
<tr><td><input type="text" /></td></tr>
</table>
<table style=" background-color:Red; display:none;">
<tr><td>Table_1</td></tr>
<tr><td>建议:</td></tr>
<tr><td><input type="text" /></td></tr>
</table>
<table style=" background-color:Red; display:none;">
<tr><td>Table_2</td></tr>
<tr><td>报修:</td></tr>
<tr><td><input type="text" /></td></tr>
</table>
</div>
</body>
希望采纳………………
<script src="jquery-1.8.0/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input").first().attr("checked", "true"); //默认让第一个radio选中。
$("table").eq(0).css("display", "block"); //默认让第一个table显示。
$("input").live("click", function () { //给radio绑定click事件。
var radioIndex = $(this).index(); //得到这个radio的索引
$("table").eq(radioIndex).css("display", "block").siblings().css("display", "none");
//让选中索引值的table显示，其他table隐藏。
});
});
</script>
HTML代码：
<body>
<input type="radio" name="radio_0" id="Radio0" value="投诉"/>投诉
<input type="radio" name="radio_0" id="Radio1" value="建议"/>建议
<input type="radio" name="radio_0" id="Radio2" value="报修"/>报修
<div>
<table style=" background-color:Red; display:none;">
<tr><td>Table_0</td></tr>
<tr><td>投诉:</td></tr>
<tr><td><input type="text" /></td></tr>
</table>
<table style=" background-color:Red; display:none;">
<tr><td>Table_1</td></tr>
<tr><td>建议:</td></tr>
<tr><td><input type="text" /></td></tr>
</table>
<table style=" background-color:Red; display:none;">
<tr><td>Table_2</td></tr>
<tr><td>报修:</td></tr>
<tr><td><input type="text" /></td></tr>
</table>
</div>
</body>
希望采纳………………
追问
提示我语法错误啊……
追答
您好：
这句是j Query的js库。必须将这个库引入才行。如果你用VS2008或者10来开发里面自带这这个库，只需要将它拉进页面的title下面即可。如果没有我可以发给你。留邮箱。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(function(){$(':radio[id^="radio_"]').click(function(){$('#table_'+$(this).attr('id').replace('radio_',''))[$(this).attr('checked')?'show':'hide']();});});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
