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>  
    

      

  • 相关阅读:
    编译内核开始的小问题Unable to find the Ncurses libraries
    qq for linux Ubuntu 64位兼容
    ubuntu下安装lighttpd
    搭建boa服务器
    INI file and Iniparser
    kernel常用.gitignore配置
    光谱学习
    jump to case label fpermissive
    Qt通用方法及类库5
    Qt通用方法及类库1
  • 原文地址:https://www.cnblogs.com/achengmu/p/8310941.html
Copyright © 2011-2022 走看看