Maison > Article > interface Web > jQuery imite un exemple de code d'effet de sélection de bouton radio

jQuery imite un exemple de code d'effet de sélection de bouton radio

怪我咯original: 2017-03-31 09:33:291693parcourir

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

est en mode liste circulaire et que chaque 25edfb22a4f469ecb59f1190150159c6 contient un bouton radio, je n'ai pas trouvé la méthode utile parent() dans jquery, j'ai donc eu du mal pendant longtemps.

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.

jQuery imite un exemple de code d'effet de sélection de bouton radio

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève discussion sur le principe de mise en œuvre de l'extension d'extension du plug-in jQueryArticle suivant：Une brève discussion sur le principe de mise en œuvre de l'extension d'extension du plug-in jQuery

Articles Liés

Voir plus