js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性
<!doctype html> <html> <head> <meta charset="utf-8"> <title>选择框样式</title> <script src="jquery.min.js"></script> <style> /*label {font-size:12px;cursor:pointer;} */ label i {font-size:12px;font-style:normal;display:inline-block;12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;} /*input[type="checkbox"],*/input[type="radio"] {display:none;} /*input[type="radio"] + i {border-radius:7px;} */ /*input[type="checkbox"]:checked + i,*/input[type="radio"]:checked + i {background:#2489c5;} /*input[type="checkbox"]:disabled + i,*/input[type="radio"]:disabled + i {border-color:#ccc;} /*input[type="checkbox"]:checked:disabled + i,*/input[type="radio"]:checked:disabled + i {background:#ccc;} </style> </head> <body> <!-- <label><input type="checkbox"><i>✓</i>复选框</label><br> <label><input type="checkbox" checked><i>✓</i>复选框</label><br> <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br> <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br> --> <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br> <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br> <ul class="table-view"> <li class="table-view-cell "> <label class="radioboxCheck"><input type="radio" name="a"><i>✓</i>单选框</label><br> </li> <li class="table-view-cell "> <label class="radioboxCheck"><input type="radio" name="b" checked><i>✓</i>单选框</label><br> </li> <li class="table-view-cell "> <label class="radioboxCheck"><input type="radio" name="c" ><i>✓</i>单选框</label><br> </li> </ul> <div id="ggs"></div> <script> $(".table-view .radioboxCheck").bind("click",function (e) { var index = $(this).parent().index(); var obj = $(this).parent().parent().find("li"); var len = obj.length; if(len < 1 || len == null || len == "undefiend")return false; for(var i=0; i<len;i++) { if(i == index) { obj.eq(i).find("label > input[type='radio']").attr("checked",true); }else{ obj.eq(i).find("label > input[type='radio']").attr("checked",false); } } }); </script> </body> </html>