html选中radio隐藏div,js点击选中radio为指定的div添加样式class

在网站开发中，JS实现单选或多选时，为指定的div添加不同的class以实现不同的样式。实战案例：

在写下面代码前请先引用JS库，并把以下代码放在前。

①两个或多个元素，实现点击后，指定元素增加/删除class样式

JS部分

//radio的class名分别为test1,test2

$(function(){

$(".test1").change(function(){

$(".box").addClass("cur");

});

});

$(function(){

$(".test2").change(function(){

$(".box").removeClass("cur");

});

});

-->

html部分

测试box

②两个元素或以上，实现选中的radio的父级元素增加/删除class

JS部分

html部分

苹果

香蕉

葡萄

以上三个单选框，第一个是默认选中的，让选中的radio给

添加样式 class="cur"。

香蕉

③同一个元素，利用增加/删除class样式实现展开或隐藏

js部分

$(document).ready(function(){

$(".opbtn").click(function(){

$(".full").toggleClass("none");//.full存在none则删除,反之增加none,多个元素用英文逗号隔开

$("#sub").toggleClass("min");

});

});

html部分

.opbtn{cursor:pointer;}

.none{display:none;}

#sub{width:100px;height:300px;}

.min{width:150px !important;height:300px;}

点击展开/隐藏

苹果

香蕉

扩展阅读

本文地址：https://www.vi586.com/web/312.html

版权声明：原创文章，版权归重庆SEO吖七所有，欢迎分享本文，支持原创，转载请保留出处