css - 重写checkbox样式 用到id 与label关联实现 但是现在checkbox循环生成多项 就不能用id了 求解决办法
问题描述
<p class='checkbox'><input type='checkbox'><label for='awesome'></label> </p> <style>.checkbox input[type='checkbox']+label::before { content: ’a0’; display: inline-block; margin-right: 0em; border-radius: 1em; width: 1.3em; height: 1.3em; line-height: 1.1em; background: silver; text-indent: .2em; vertical-align: 0.2em; font-size: 20px;}.checkbox input[type='checkbox']:checked+label::before { background: yellowgreen; content: ’2605’;}input[type='checkbox'] { position: absolute; display: none;} </style>
现在页面中有多个checkbox循环生成 就不能用id于label产生关联了 请问怎么解决
问题解答
回答1:可以用 js 生成动态 id 吧。在循环中给每个 input 生成 id = 'awesome'+i,同时把 label 的 for 属性值也设置成一样的。下面是简单的示例:
var body=document.getElementsByTagName(’body’)[0];for(var i=0;i<3;i++){ var input=document.createElement('input'); input.id='input'+i; var label=document.createElement('label'); label.setAttribute('for','input'+i); label.innerHTML='点击'; body.appendChild(label) body.appendChild(input)}回答2:
<label class='label-checkbox'><input type='radio' name='my-radio' checked='checked'></label>
这么写不就好了 多简单
相关文章:
1. python相关问题求解决,有偿2. javascript - input输入框触发change事件后,外部元素会被选中3. python - 用__call__ 实现装饰器功能4. javascript - 把字符串日期转换成一般时间格式后,发现小于10的数字不会自动添加0在前面,如下5. javascript - 在sublime中如何给.vue文件注释?6. javascript - js判断一个数组是否重复7. python - 请问用cxfreeze打包的可执行程序能反编译出源码么?8. javascript - vue2.0中router.repalce跟router.push有什么区别,二者的应用场景是会有怎样的区别?9. javascript - 这种上传图片预览怎么做?10. javascript - prismplayer播放器全屏问题