当前位置 : 主页 > 网站建设 > 正文

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

原创

重庆seo2016-07-23 08:33:00阅读()JSA+ / A-

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

       在写下面代码前请先引用JS库,并把以下代码放在</head>前。

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

JS部分

<script type="text/javascript" language="javascript">
<--
//radio的class名分别为test1,test2
$(function(){
    $(".test1").change(function(){
        $(".box").addClass("cur");
    });
});
$(function(){
    $(".test2").change(function(){
        $(".box").removeClass("cur");
    });
});
-->
</script>

html部分

<!--单选需要name相同,多选不同,下面同理-->
<input type="radio" name="type" class="test1" value="测试内容" checked>
<input type="radio" name="type" class="test2" value="测试内容2" >
<div class="box">测试box</div>

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

JS部分

<script type="text/javascript" language="javascript">
<!--
$(function(){
    $(".box input").change(function(){
        $(":checked").parent().addClass("cur").siblings().removeClass("cur");
    });
});
-->
</script>

html部分

<div class="box">
 <p><input type="radio" name="fruit" checked="checked" />苹果</p>
 <p><input type="radio" name="fruit" />香蕉</p>
 <p><input type="radio" name="fruit" />葡萄</p>
</div>

      以上三个单选框,第一个是默认选中的,让选中的radio给<p>添加样式 class="cur"。

<p class="cur"><input type="radio" name="fruit" />香蕉</p>

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

js部分

 <script type="text/javascript">
  $(document).ready(function(){ 
   $(".opbtn").click(function(){ 
    $(".full").toggleClass("none");//.full存在none则删除,反之增加none,多个元素用英文逗号隔开 
    $("#sub").toggleClass("min");
   }); 
  }); 
</script>

html部分

<style type="text/css">
.opbtn{cursor:pointer;}
.none{display:none;}
#sub{width:100px;height:300px;}
.min{width:150px !important;height:300px;}
</style>
<a class="opbtn">点击展开/隐藏</a>
<div class="full">苹果</div>
<div id="sub">香蕉</div>

    扩展阅读

    本文地址:https://www.vi586.com/web/312.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处

    赞(6)