jQuery imite un exemple de code d'effet de sélection de bouton radio-js tutoriel-php.cn

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

怪我咯

Libérer： 2017-03-31 09:33:29

original

1727 Les gens l'ont consulté

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

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>

Copier après la connexion

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