CSS Checkbox

by darkk6

HTML

<input type="checkbox" value="A" id="check1" class="myCheck_1" />
<label for="check1"><span></span>CheckBox A</label>
<br><br>
<input type="checkbox" value="B" id="check2" class="myCheck_2" />
<label for="check2">CheckBox B</label>
<br><br>
<input type="checkbox" value="C" id="check3" class="myCheck_3" />
<label for="check3"><span>●</span>CheckBox C</label>
<br><br>
<input type="checkbox" value="D" id="ios" class="ios7" />
<label for="ios"><span></span>CheckBox D</label>
<hr>
<button> 顯示選擇的項目 </button>
<hr>
<div id="msg"></div>

CSS

input[type="checkbox"]{
    display:none;
}

/* myCheck_1 */
    input[type="checkbox"].myCheck_1+label span{
        display:inline-block;
        vertical-align:middle;
        width:20px;
        height:20px;
        background-repeat:no-repeat;
        background-image:url('http://140.116.39.77:41402/aect/image/sprite.png');
        background-position:0px 0px;
    }
    input[type="checkbox"].myCheck_1+label:hover span{
        background-position:-40px 0px;
    }
    input[type="checkbox"].myCheck_1:checked+label span{
        background-position:-20px 0px;
    }
    input[type="checkbox"].myCheck_1:checked+label:hover span{
        background-position:-60px 0px;
    }

/* myCheck_2 */
    input[type="checkbox"].myCheck_2+label{
        background-color:white;
        border:1px white solid;
    }
    input[type="checkbox"].myCheck_2+label:hover{
        border:1px black solid !important;
    }
    input[type="checkbox"].myCheck_2:checked+label{
        background-color:#A2FFA2;
        border:1px white solid;
    }
/* myCheck_3 */
    input[type="checkbox"].myCheck_3+label span{
        visibility:hidden;
    }
    
    input[type="checkbox"].myCheck_3:hover+label span{
        visibility:visible;
        color:#C0C0C0;
    }
    
    input[type="checkbox"].myCheck_3:checked+label span{
        visibility:visible;
        color:black;
    }
    
    input[type="checkbox"].myCheck_3:checked+label:hover span{
        visibility:visible;
        color:#7B7B7B;
    }

/* ios 7 */
    input[type="checkbox"].ios7{
        display:none;
    }
    
    input[type="checkbox"].ios7+label{
        display:inline-block;
        vertical-align:middle;
        padding:5px;
        width:140px;
        border:1px solid gray;
        background-color:white;
        font-size:16px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }
   ...

JavaScript

$(document).ready(function(){
    $("button").click(function(){
        var len=$("input[type='checkbox']").length;
        var str="被勾選的項目有：";
        for(var i=0;i<len;i++){
            var ck=$("input[type='checkbox']:eq("+i+")");
            if(ck.prop("checked"))
                str+=ck.val()+" ";
        }
        $("#msg").text(str);
    });
});