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

       在网站开发中，JS实现单选或多选时，为指定的p添加不同的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" >
<p class="box">测试box</p>

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

JS部分

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

html部分

<p 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>
</p>

      以上三个单选框，第一个是默认选中的，让选中的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>
<p class="full">苹果</p>
<p id="sub">香蕉</p>

转载请注明来源网址：https://www.mubanyun.com/news/1416.html