jquery 获取radio的选中事件，radio默认选中时，显示其中一行tr，选中另外一个radio时，显示不同的tr记录

Posted 2023-02-24

<table>
<tr>
<td width="140" class="label">
定价类型：
</td>
<td>
<input type="radio" name="price_type" checked="checked"
id="price_type1" value="1" />
普通类型
<input type="radio" name="price_type"
id="price_type2" value="1" />
特殊类型
</td>
</tr>
<tr id="sellInfo1" style="display:none;">
<TD>123</TD>
</tr>
<tr id="sellInfo2" style="display:none;">
<td>111</td>
</tr>
</table>

首先添加给radio添加绑定单击事件，可以直接使用onclick=""，也可以用jquery绑定；

$(function()

showCont();

$("input[name=price_type]").click(function()

showCont();

);

);

function showCont()

var normal = document.getElementById("price_type1");

var special = document.getElementById("price_type2");

if (normal.checked)

$("#sellInfo2").hide();

$("#sellInfo1").show();

if (special.checked)

$("#sellInfo1").hide();

$("#sellInfo2").show();

结果：

参考技术A <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function()
 showCont();
 $("input[name=price_type]").click(function()
  showCont();
 );
);
function showCont()
 switch($("input[name=price_type]:checked").attr("id"))
  case "price_type1":
   //alert("one");
   $("#sellInfo2").hide();
   $("#sellInfo1").show();
   break;
  case "price_type2":
   $("#sellInfo1").hide();
   $("#sellInfo2").show();
   break;
  default:
   break;
 

</script>

本回答被提问者采纳 参考技术B

你好！！

可以通过对radio绑定click事件来处理·····

下面的代码的实现--->>是通过将radio的索引与将要显示的TR的索引对应起来进行处理的······

$(function()
    $(":radio[name='price_type']").click(function()
          $("table tr:gt(0)").hide().eq( $(this).index() ).show();
    );
    $("#price_type1").trigger("click");
);

希望对你有帮助！！！