原文
1、css 呈现
选中后 的input的样式可以用 /*背景图*/
background:url(&＃39;../pc/images/archives/icon_choosed.png&＃39;) no-repeat center center; )
代码
1 /*input 选中前的样式*/
2 input[type&＃61;"checkbox"] &＃43; 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&＃61;"checkbox"]:checked &＃43; label::before { 14 background:url(&＃39;../pc/images/archives/icon_choosed.png&＃39;) no-repeat center center;/*背景图的写法是生效的*/ 15 border:none; 16 }
/*拓展**/
input[type&＃61;"checkbox"]:checked &＃43; label::before {content: "\2713";background-color: yellowgreen;
}
生成效果为&＃xff1a;
2、 现在把原来的复选框隐藏&＃xff1a;
input {position: absolute;clip: rect(0, 0, 0, 0);
}
3、注意 label 的 for与input 的 id 要保持一致&＃xff1a;动态生成法
str1&＃43;&＃61;&＃39;
str1&＃43;&＃61; &＃39;&＃39;&＃43;&＃39;&＃39;&＃43;userName&＃43;&＃39;&＃39;&＃43;&＃39;-&＃39;&＃43;courseCount&＃43;&＃39;节&＃39;;
str1&＃43;&＃61; &＃39;&＃39;;
str1&＃43;&＃61; &＃39;id&＃61;"awesome_&＃39;&＃43;i&＃43;&＃39;" data-userId&＃61;"&＃39;&＃43;userId&＃43;&＃39;" data-courseFeeId&＃61;"&＃39;&＃43;courseFeeId&＃43;&＃39;" οnclick&＃61;"adddMemberCourse(this)">&＃39;; str1&＃43;&＃61; &＃39;&＃39;; str1&＃43;&＃61; &＃39;&＃39;; str1&＃43;&＃61;&＃39;
//标记选中的input
function adddMemberCourse(obj){
var checked &＃61; $(obj).attr("checked");
if(checked &＃61;&＃61; "checked"){
$(obj).removeAttr("checked");
}else{
$(obj).attr("checked","checked");
}
}
//获取选中的input
$(&＃39;#selectTime .timeshow:eq(&＃39;&＃43;i&＃43;&＃39;) .item&＃39;).each(function(){
var checked &＃61; $(this).find(&＃39;input&＃39;).attr("checked");
if(checked &＃61;&＃61; &＃39;checked&＃39;){
courseIds &＃43;&＃61; $(this).attr(&＃39;data-timeid&＃39;)&＃43;"-";
}
});
参考 https://www.cnblogs.com/xinjie-just/p/7302020.html
京公网安备 11010802041100号