JQuery/PHP
jQuery 实现控制radio单选切换不同的内容
PetitQ
收藏
我们在做网站过程中，有时需要制作单选内容，让用户选择想看的内容，通过单选按钮来进行切换。这时就需要用到 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 来切换显示不同的内容了。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
