在網(wǎng)站開(kāi)發(fā)中，JS實(shí)現(xiàn)單選或多選時(shí)，為指定的p添加不同的class以實(shí)現(xiàn)不同的樣式。實(shí)戰(zhàn)案例：

       在寫(xiě)下面代碼前請(qǐng)先引用JS庫(kù)，并把以下代碼放在</head>前。

①兩個(gè)或多個(gè)元素，實(shí)現(xiàn)點(diǎn)擊后，指定元素增加/刪除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="測(cè)試內(nèi)容" checked>
<input type="radio" name="type" class="test2" value="測(cè)試內(nèi)容2" >
<p class="box">測(cè)試box</p>

②兩個(gè)元素或以上，實(shí)現(xiàn)選中的radio的父級(jí)元素增加/刪除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íng)果</p>
 <p><input type="radio" name="fruit" />香蕉</p>
 <p><input type="radio" name="fruit" />葡萄</p>
</p>

      以上三個(gè)單選框，第一個(gè)是默認(rèn)選中的，讓選中的radio給<p>添加樣式 class="cur"。

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

③同一個(gè)元素，利用增加/刪除class樣式實(shí)現(xiàn)展開(kāi)或隱藏

js部分

 <script type="text/javascript">
  $(document).ready(function(){ 
   $(".opbtn").click(function(){ 
    $(".full").toggleClass("none");//.full存在none則刪除,反之增加none,多個(gè)元素用英文逗號(hào)隔開(kāi) 
    $("#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">點(diǎn)擊展開(kāi)/隱藏</a>
<p class="full">蘋(píng)果</p>
<p id="sub">香蕉</p>