jQuery --- 實現 checkbox 樣式的單選框


  早就想寫點博客了 一直懶着動  最近發現一些寫過的東西都不記得了,下決心把自己平時遇到的問題、得到的經驗記錄下來,希望能大家一點幫助

  這是之前寫的一個模態框 要求單選 但是 要求radio的默認樣式 太難看了 就想用checkbox + js 自己把它改成單選框 如下:

  html代碼:

<div class="list-item">
    <input type="checkbox" id="1" value="">
    <label for="1">Dance of the Reed Pipes</label>
</div>
<div class="list-item">
    <input type="checkbox" id="2" value="">
    <label for="2">Dance of the Reed Pies</label>
</div>
<div class="list-item">
    <input type="checkbox" id="3" value="">
    <label for="3">Dance of the Reed Pipes</label>
</div>
<div class="list-item">
    <input type="checkbox" id="4" value="">
    <label for="4">Dance of the Reed Pipes</label>
</div>
<div class="list-item">
    <input type="checkbox" id="5" value="">
    <label for="5">Dance of the Reed Pipes</label>
</div>

  js代碼:

$(".list-item").click(function(){
     $(".list-item").find("input[type='checkbox']").prop("checked", false);//每次點擊前,將所有checkbox置為 未選中
     var cobj = $(this).find("input[type='checkbox']");//當前點擊的checkbox
     cobj.prop("checked", true);//將當前點擊的checkbox置為選中狀態
        //over
})

  代碼並不復雜 挺簡單的 ,如果想獲取點擊的id,只要再加一句 

var itemId = cobj.attr("id");

  這樣就可以了 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM