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

這是以前寫的一個模態框 要求單選 可是 要求radio的默認樣式 太難看了 就想用checkbox + js 本身把它改爲單選框 以下:html

  html代碼:this

複製代碼
<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代碼:spa

複製代碼
$(".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,只要再加一句 code

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

  這樣就能夠了 htm

相關文章
相關標籤/搜索