1、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;
}
生成效果为：
2、 现在把原来的复选框隐藏：
input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
3、注意 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\')+"-";
}
});