零基础学做网站培训介绍

当前位置:

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

我们在做网站过程中,有时需要制作单选内容,让用户选择想看的内容,通过单选按钮来进行切换。这时就需要用到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来切换显示不同的内容了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程