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

       在寫下面代碼前請先引用JS庫，并把以下代碼放在</head>前。

①兩個或多個元素，實現(xià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="測試內(nèi)容" checked>
<input type="radio" name="type" class="test2" value="測試內(nèi)容2" >
<p class="box">測試box</p>

②兩個元素或以上，實現(xiàn)選中的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樣式實現(xiàn)展開或隱藏

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>