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>