JQ单选框，选择后按钮出现图片

最新推荐文章于 2021-06-09 10:21:37 发布

一只头秃的死肥宅

最新推荐文章于 2021-06-09 10:21:37 发布

阅读量2k

点赞数

分类专栏： HTML5 文章标签： HTML5 JQuery JQ 新手

本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/76159145

版权

HTML5 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="../../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
         $(function(){
            $("#b").click(function(){
               var val=$("input:checked").val();
               switch(val) {
                  case 'a':
                  $("img").attr('src','pingguo.jpg');
                  break;
                  case 'b':
                  $("img").attr('src','xiangjiao.jpg');
                  break;
                  case 'c':
                  $("img").attr('src','putao.jpg');
                  break;
                  case 'd':
                  $("img").attr('src','li.jpg');
                  break;
                  case 'e':
                  $("img").attr('src','xigua.jpg');
                  break;
               }
            })
         })
      </script>
   </head>
   <body>
      <img src="pingguo.jpg.jpg"/>
      <br />
      <h1>请选择水果</h1>
      <input type="radio" name="fruit" value="a" checked="checked" />香蕉
      <input type="radio" name="fruit" value="b" />梨
      <input type="radio" name="fruit" value="c" />葡萄
      <input type="radio" name="fruit" value="d" />苹果
      <input type="radio" name="fruit" value="e" />西瓜
      <input type="button" id="b" value="改变图片" />
   </body>
</html>