關於input 的選中，自定義input[type="checkbox"]樣式

 

一、css 呈現

　  選中後 的input的樣式能夠用 /*背景圖*/

     background:url('../pc/images/archives/icon_choosed.png') no-repeat center center;  )

代碼

 1 /*input 選中前的樣式*/
 2 input[type="checkbox"] + label::before {
 3     content: "\a0";  /*不換行空格*/
 4     display: inline-block;
 5     width:20px;
 6     height:20px;
 7     border-radius:2px;
 8     text-align:center;
 9     line-height:20px;  
10     border:1px solid #ddd;
11 }
12 /*input 選中後的樣式 */
13 input[type="checkbox"]:checked + label::before {
14     background:url('../pc/images/archives/icon_choosed.png') no-repeat center center;/*背景圖的寫法是生效的*/
15     border:none;
16 }

/*拓展**/

input[type="checkbox"]:checked + label::before {
    　　content: "\2713";
   　　 background-color: yellowgreen;
}

 生成效果爲：

　　

　　

 

二、 如今把原來的複選框隱藏：

　　

input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

 

三、注意 label 的 for與input 的 id 要保持一致：動態生成法

str1+='<div class="clearfix item cursor" data-isMember="'+isMember+'" data-userId="'+userId+'" >';
str1+=    '<span class="pull-left">'+'<span class="userName">'+userName+'</span>'+'-'+courseCount+'節</span>';
str1+=    '<span class="pull-right">';
str1+=        '<input type="checkbox" id="awesome_'+i+'" data-userId="'+userId+'" data-courseFeeId="'+courseFeeId+'" onclick="adddMemberCourse(this)">';
str1+=        '<label for="awesome_'+i+'"></label>';
str1+=    '</span>';
str1+='</div>';


//標記選中的input
function adddMemberCourse(obj){

　var checked = $(obj).attr("checked");

　　if(checked == "checked"){
　　　　$(obj).removeAttr("checked");
　　}else{
　　　　$(obj).attr("checked","checked");
　　}

}

//獲取選中的input

$('#selectTime .timeshow:eq('+i+') .item').each(function(){
　　var checked = $(this).find('input').attr("checked");
　　if(checked == 'checked'){
　　　　courseIds += $(this).attr('data-timeid')+"-";

　　}
});

參考 https://www.cnblogs.com/xinjie-just/p/7302020.html