javascript 根据radio隐藏table

发布网友发布时间：2024-10-22 22:42

共2个回答

热心网友时间：2024-11-15 00:26

您好：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>

希望采纳………………

热心网友时间：2024-11-15 00:32

$(function(){$(':radio[id^="radio_"]').click(function(){$('#table_'+$(this).attr('id').replace('radio_',''))[$(this).attr('checked')?'show':'hide']();});});