zoukankan      html  css  js  c++  java
  • 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;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>  
    

      

  • 相关阅读:
    java io系列23之 BufferedReader(字符缓冲输入流)
    java io系列22之 FileReader和FileWriter
    java io系列21之 InputStreamReader和OutputStreamWriter
    java io系列20之 PipedReader和PipedWriter
    java io系列19之 CharArrayWriter(字符数组输出流)
    java io系列18之 CharArrayReader(字符数组输入流)
    java io系列17之 System.out.println("hello world")原理
    java io系列16之 PrintStream(打印输出流)详解
    java io系列15之 DataOutputStream(数据输出流)的认知、源码和示例
    java io系列14之 DataInputStream(数据输入流)的认知、源码和示例
  • 原文地址:https://www.cnblogs.com/achengmu/p/8310941.html
Copyright © 2011-2022 走看看