js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>选择框样式</title>
  6. <script src="jquery.min.js"></script>
  7. <style>
  8. /*label {font-size:12px;cursor:pointer;}  */
  9. 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;}
  10. /*input[type="checkbox"],*/input[type="radio"] {display:none;}
  11. /*input[type="radio"] + i {border-radius:7px;}  */
  12. /*input[type="checkbox"]:checked + i,*/input[type="radio"]:checked + i {background:#2489c5;}
  13. /*input[type="checkbox"]:disabled + i,*/input[type="radio"]:disabled + i {border-color:#ccc;}
  14. /*input[type="checkbox"]:checked:disabled + i,*/input[type="radio"]:checked:disabled + i {background:#ccc;}  
  15.  
  16. </style>
  17. </head>
  18. <body>  
  19.  
  20. <!--
  21. <label><input type="checkbox"><i>✓</i>复选框</label><br>
  22. <label><input type="checkbox" checked><i>✓</i>复选框</label><br>
  23. <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
  24. <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>
  25. -->
  26. <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>
  27. <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>  
  28.  
  29. <ul class="table-view">
  30. 	<li class="table-view-cell ">
  31. 	<label class="radioboxCheck"><input type="radio" name="a"><i>✓</i>单选框</label><br>
  32. 	</li>
  33. 	<li class="table-view-cell ">
  34. 	<label class="radioboxCheck"><input type="radio" name="b" checked><i>✓</i>单选框</label><br>
  35. 	</li>
  36. 	<li class="table-view-cell ">
  37. 	<label class="radioboxCheck"><input type="radio" name="c" ><i>✓</i>单选框</label><br>
  38. 	</li>
  39. </ul>
  40.  
  41. <div id="ggs"></div>
  42. <script>
  43.  
  44. $(".table-view .radioboxCheck").bind("click",function (e) {
  45.  
  46. 	var index = $(this).parent().index();
  47. 	var obj = $(this).parent().parent().find("li");
  48. 	var len = obj.length;
  49.  
  50. 	if(len < 1 || len == null || len == "undefiend")return false;
  51.  
  52. 		for(var i=0; i<len;i++)
  53. 		{
  54. 			if(i == index)
  55. 			{
  56. 				obj.eq(i).find("label > input[type='radio']").attr("checked",true);
  57. 			}else{
  58. 				obj.eq(i).find("label > input[type='radio']").attr("checked",false);
  59. 			}
  60. 		}
  61.  
  62.     });
  63. </script>
  64.  
  65. </body>
  66. </html>

　　

js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性的更多相关文章

  1. jquery 获取被点击元素的id属性值

    有时候可能需要获取被点击元素的一些信息,此处就以id属性为例子,进行演示一下. $(document).click(function (e){ var v_id=e.target.id; consol ...

  2. 获取点击元素的id

    1.onclick="dianji(this.id)" 传入id到方法里function dianji(id){ //这个就是id}2. $(document).click(fun ...

  3. jquery点击li 获取当前父节点所在类的索引

    jquery点击li 获取当前父节点所在类的索引 $('.jbcz').find('.content li').click(function(){ //alert($('.jbcz').find('. ...

  4. struts2学习笔记（2）---Action中訪问ServletAPI获取Map类型的Servlet元素

    源码: strust.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts ...

  5. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  6. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. js if for 详解 获取元素方式 及一些js 基础知识

    ##获取元素的新方法## --document.querySelector('Css Selector{css选择器}') 接收一个css选择器(通配,群组,类,包含,id....等) 若这个选择器对 ...

  9. Vue.js：循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

随机推荐

  1. C#实体类序列化为XML

    这两天,应要求做一个C/S的小程序,考虑到程序简洁小巧,存数据的方式不使用数据库,而是直接存入XML文档中保存.为了把复杂实体类里面的属性存入XML,我们可以使用C#有的反射机制,做一个简单的通用工具 ...

  2. unity里c# gc优化 -字符串

    1使用unsafe,直接修改字符串 public static class UnsafeString { public static unsafe void Copy(this string str, ...

  3. js验证表单大全3

    2 >表单提交验证类  2.1 表单项不能为空 <scriptlanguage="javascript"> <!-- function CheckForm( ...

  4. 让VisualStudio Profiler捕捉执行的sql语句

    启动Profiler之前设置一下Targets的属性就行,图中有说明.

  5. 《Mining of Massive Datasets》笔记（一）

    数据挖掘基本概念 数据挖掘定义 最广为接受得到定义是,数据挖掘是数据"模型"的发现过程.而"模型"却可以有多种含义. 1)统计建模 统计学家认为数据挖掘就是统计 ...

  6. ELBO 与 KL散度

    浅谈KL散度 一.第一种理解 相对熵(relative entropy)又称为KL散度(Kullback–Leibler divergence,简称KLD),信息散度(information dive ...

  7. HBA卡 和 RAID卡

    HBA卡: 只从HBA的英文解释HOST BUS ADAPTER(主机总线适配器)就能看出来,他肯定是给主机用的,一般HBA就是给主机插上后,给主机扩展出更多的接口,来连接外部的设备.大多数讲到HBA ...

  8. mysq数据库的安装和基本操作

    一.数据库的简介 1.什么是数据库? 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据库中的数据按一定的数学模型组织.描述和存储,具有较小的冗余,较高的数据独 ...

  9. 剑指offer 面试36题

    面试36题: 题:二叉搜索树与双向链表 题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 解题思路一:由于输入的一个二叉搜索树, ...

  10. List Slice in Python(Compared with Java)

    Python: 在Python中, 对于list, 切片会返回一个新的list, 而不会改变原有的list. 注意这儿说的"不会改变原有的list"指的是下面的这种情况: a = ...