使用label失效的原因
1.首先检查自己的id有没有加唯一的参, 否则会出现只有第一个id生效的情况, 因为这个问题, 曾经改了两天列表也没想起来改这个id ,而且还有两次同样的错 T-T
<input type="checkbox" id="'+value.id+'idname"> <label for="'+value.id+'idname"></label> 或 <input type="checkbox" id="${value.id}idname"> <label for="${value.id}idname"></label>
2.当图片display:inline-block;也不显示的时候, 你可能需要改变一下label的位置, 尽量别包围input, 最好放在input下面
<input type="checkbox" id="+value.id+"> <label for="+value.id+ "></label>
或者是<label>包围input, 用<span>来设点击背景时, span需要在<input>下面
<label class="my_label"> <input class="protocol" type="checkbox" /> <span></span> 其他内容 </label>
以下是使用相似的<>label>包围input等内容的源码, 效果是这样的:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type="radio"]{/*隐藏掉radio,或者直接<input>标签里写hidden*/ appearance: none; -webkit-appearance: none; outline: none; display:none; } label{ width:100px; height:100px; display:inline-block; } /*未选中时*/ label input[type="radio"] + span{ width:44px; height:45px; display:inline-block; background:url(images/check.png) no-repeat;/*这个图是点击按钮上下排列在一起的精灵图*/ background-position:0 0; } /*选中checkbox时,更改背景图片位置*/ label input[type="radio"]:checked + span{ background-position:0 -44px; } </style> <style> label{ width:100px; height:100px; display:inline-block; } /*未选中时*/ .my_protocol .input_agreement_protocol+span { width: 88px; height: 88px; display: inline-block; background: url(images/checkedn.png) no-repeat; /*两张图片来回切换*/ } /*选中checkbox时,更改背景图片*/ .my_protocol .input_agreement_protocol:checked+span { background-image: url(images/checkedy.png); } </style> </head> <body> <div>两个方法一个radio一个check</div> <label><input type="radio" name="paytype-wj"><span></span>方法1</label> <label><input type="radio" name="paytype-wj"><span></span>方法1</label> <label><input type="radio" name="paytype-wj"><span></span>方法1</label> <div style="clear: both;">换行</div> <label class="my_protocol"> <input class="input_agreement_protocol" type="checkbox" hidden/> <!--或者css里面写隐藏本身的样式--> <span></span> 方法2 </label> </body> </html>
