js:for循環ul/li,獲取當前被點擊元素的id,以及給其他li設置屬性


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;width: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>  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM