建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

jquery实现控制radio单选切换不同的内容

GG网络技术分享 2025-03-18 16:07 3


我们在做网站过程中,有时需要制作单选内容,让用户选择想看的内容,通过单选按钮来进行切换,与tab栏选项卡类似。这时就需要用到jquery控制radio单选切换不同的内容。

实现代码如下:

首先写HTML代码,放二个radio单选按钮,以及二个不同内容的DIV;

<div class="choose">
<label><input name="formweizhi" type="radio" value="houtai" />选项一</label>
<label><input name="formweizhi" type="radio" value="yhemail" />选项二</label>
</div>

<div class="show1">
内容一
</div>
<div class="show2">
内容二
</div>

再写JQUERY代码,用于控制radio单选切换不同的内容;

<script>
jQuery(function () {
// 默认选中选项二
jQuery(".show1").hide();
jQuery('input:radio[name="formweizhi"]').eq(1).attr("checked",true);
// 通过radio切换不同的内容
jQuery("input[name="formweizhi"]").change(function () {
var vel = jQuery('input:radio[name="formweizhi"]:checked').val();
if (vel == 'houtai') {
jQuery(".show2").hide();
jQuery(".show1").show();
} else {
jQuery(".show1").hide();
jQuery(".show2").show();
}
});
})

</script>

通过HTML+JQUERY 就可以实现点击radio来切换显示不同的内容了。

标签:

提交需求或反馈

Demand feedback