自定义开关型单选按钮

最新推荐文章于 2019-07-29 17:59:47 发布

九布

最新推荐文章于 2019-07-29 17:59:47 发布

阅读量332

点赞数

分类专栏：前端小知识

本文链接：https://blog.csdn.net/qq_38151921/article/details/83094831

版权

前端小知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>自定义开关型单选按钮</title>
       <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <style type="text/css">
       .radio{width: 35px;border: 2px solid #6495ED;text-align: center; float:left;margin: 0px;padding: 0px;}
       .addclass{background-color: cornflowerblue;color: white;}
   </style>
   <script type="text/javascript">
       $(function(){
           $("#yes").click(function(){
               $("#yes").addClass("addclass");
               $("#no").removeClass("addclass");
           });
           $("#no").click(function(){
               $("#no").addClass("addclass");
               $("#yes").removeClass("addclass");
           });
       })
   </script>
   <body>
       <div id="yes" class="radio addclass"><span>是</span></div>

       <div id="no" class="radio"><span>否</span></div>
   </body>
</html>

九布

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义开关型单选按钮

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自定义开关型单选按钮&lt;/title&gt; &lt;script src="../js/jquery.js" type=&
复制链接

扫一扫