JQuery/PHP

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

也想出现在这里?联系我们
创客云

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

实现代码:

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

也想出现在这里?联系我们
创客主机
  1. <div class="choose">
  2. <label><input name="formweizhi" type="radio" value="houtai" />选项一</label>
  3. <label><input name="formweizhi" type="radio" value="yhemail" />选项二</label>
  4. </div>
  5.  
  6. <div class="show1">
  7. 内容一
  8. </div>
  9. <div class="show2">
  10. 内容二
  11. </div>

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

  1. <script>
  2. jQuery(function () {
  3. // 默认选中选项二
  4. jQuery(".show1").hide();
  5. jQuery('input:radio[name="formweizhi"]').eq(1).attr("checked",true);
  6. // 通过radio切换不同的内容
  7. jQuery("input[name='formweizhi']").change(function () {
  8. var vel = jQuery('input:radio[name="formweizhi"]:checked').val();
  9. if (vel == 'houtai') {
  10. jQuery(".show2").hide();
  11. jQuery(".show1").show();
  12. } else {
  13. jQuery(".show1").hide();
  14. jQuery(".show2").show();
  15. }
  16. });
  17. })
  18.  
  19. </script>

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

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件