Maison >interface Web >js tutoriel >jQuery imite un exemple de code d'effet de sélection de bouton radio
Je viens de commencer à apprendre jquery Il est très difficile d'embellir les boutons dans certains formulaires CSS au travail, alors j'ai pensé à utiliser jquery pour le remplacer, jquery pour checkbox C'est très simple, c'est un simple effet de changement de style, utilisez simplement la méthode toggleClass().
Je n'ai jamais su comment faire la case de boutons radio auparavant, car lorsque l'une des cases de boutons radio est sélectionnée, les styles des autres doivent être supprimés. Si les deux cases de boutons radio sont au même niveau, utilisez siblings() Ensuite, vous pouvez directement trouver d'autres cases de boutons radio et supprimer le style. Étant donné que mon travail
css est le suivant :
<!DOCTYPE html> <html class="area"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <title>设置-收货地址</title> <link rel="stylesheet" href="../css/app.css"> <script src="../js/jquery.js"></script> //<![CDATA[ <script> $(function(){ //改变样式同时改变右边的文字 $("span.zdy-icon-radio").click(function(){ $(this).addClass("active").text("默认地址") .parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认"); }); }) //]]> </script> <style> .bjsc-lf span{float: left;} .bjsc-lf > span:last-child{line-height: 2.1rem;} .zdy-icon-radio{display:block;width: 30%rem; height: 2.15rem;margin-right: 1rem;padding-left: 3.15rem;line-height: 2.15rem; font-family:"微软雅黑";float: left;background:url(../img/checkRight.jpg) no-repeat;background-size: 2.1rem 2.1rem;;} .bjsc-rt{float: right;} .zdy-icon-radio.active{background: url(../img/checked.png) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;} </style> </head> <body> <p class="xp-content02"> <p class="tt02"> 编辑地址 </p> <p class="bianji-dizhi"> <p class="tt09"> <span>15354656536</span> <span>苏定芳</span> </p> <p class="your-adress02"> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </p> <p class="bianji-shanchu mui-clearfix"> <p class="bjsc-lf mui-clearfix"> <span class="zdy-icon-radio active">默认地址</span> </p> <p class="bjsc-rt"> <span class="mui-icon mui-icon-compose"></span>编辑 <span class="mui-icon mui-icon-trash"></span>删除 </p> </p> </p> <p class="greybg02"></p> <p class="bianji-dizhi"> <p class="tt09"> <span>15354656536</span> <span>苏定芳</span> </p> <p class="your-adress02"> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </p> <p class="bianji-shanchu mui-clearfix"> <p class="bjsc-lf"> <span class="zdy-icon-radio">设为默认</span> </p> <p class="bjsc-rt"> <span class="mui-icon mui-icon-compose"></span>编辑 <span class="mui-icon mui-icon-trash"></span>删除 </p> </p> </p> <p class="greybg02"></p> <p class="bianji-dizhi"> <p class="tt09"> <span>15354656536</span> <span>苏定芳</span> </p> <p class="your-adress02"> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </p> <p class="bianji-shanchu mui-clearfix"> <p class="bjsc-lf"> <span class="zdy-icon-radio">设为默认</span> </p> <p class="bjsc-rt"> <span class="mui-icon mui-icon-compose"></span>编辑 <span class="mui-icon mui-icon-trash"></span>删除 </p> </p> </p> <p class="greybg02"></p> </body> </html>L'effet est le suivant : Quoi qu'il en soit, un seul style peut être ajouté, et le texte sur le droit changera également avec le clic.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!