H5中checkbox的梦幻变身

在利用bootstrap进行网格布局的时候，很多时候都会用到checkbox控件。那么获取checkbox是否被选中有哪些方法呢?我们又怎么判断是否被选中？又是如何计算一组中有多少被选中呢?另外我们又如何改造现成的checkbox使它变成我们想象的模样？

前提是在jquery插件使用下：

一.判断checkbox是否被选中

方法一：

$("#checkbox1").prop("checked")；

方法二：

$("#checkbox1").is(':checked')；

二.使checkbox选中

方法一：

 $("#checkbox1").attr("checked", "checked");

方法二：

 $("#checkbox2").attr("checked",true);

方法三：

$("#checkbox3").prop("checked", true);

方法四：

$("#checkbox4").prop("checked",function(){
    return true;
}); 

方法五：

$("#checkbox5").prop("checked","checked ");

方法六：

$("#checkbox6")[0].checked = true;

三.计算一组checkbox中被选中的个数

方法一：

$(":input[type=checkbox][checked=checked]").length

方法二：

$(":input[type=checkbox]:checked").length

四.一些注意小事项

三中的方法一：
计算checkbox被选中的个数使用的属性是[checked=checked],所以你只能取到利用二中的方法一和方法五设置被选中的checkbox；不过在jquery2.0版本以下也可以取出所有被选中的checkbox；

三中的方法二：
可以计算出所有方法二中被设置选中的checkbox。

五.checkbox变身

如果你对默认的样式不是很满意，或者说不能满足要求的话，那么动动手来进行改造吧！

这是默认的checkbox

经过改造的样式

 //将原来的方形小框隐藏
 //利用label自己设置一个小框
游戏机1 //checkbox的条目名称

.regular-checkbox {
    display: none;
}

.regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}

.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}
.regular-checkbox + label + span{
    line-height: 20px;
    position: absolute;
    margin: 0 5px;
}

//如果还嫌不够大 还可以使用下面的样式
.big-checkbox + label {
    padding: 18px;
}

.big-checkbox:checked + label:after {
    font-size: 28px;
    left: 6px;
}
.big-checkbox + label + span{
    font-size:28px;
    line-height: 38px;
    position: absolute;
    margin: 0 5px;
}