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

最新推荐文章于 2024-07-14 15:54:59 发布
最新推荐文章于 2024-07-14 15:54:59 发布
阅读量1.8k 收藏
点赞数
文章标签： javascript 后端 ViewUI

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>

　　

weixin_34292924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
10-15
在Vue.js中，`v-for`指令用于循环渲染列表数据，而实现点击列表项（li）使其字体变红，可以通过动态绑定CSS类来实现。在这个示例中，我们看到一个包含多个li元素的列表，每个li元素对应于`lists`数组中的一个对象。...
用js循环生成ul列表并插入到页面中
a496798779的博客
04-25 2860
1 <body> 2 <div id="box"></div> 3 <script> 4 var arr = [ 5 '山西省委附近多次爆炸 官方称尚不确定是恐怖袭击', 6 '甘肃张掖明令禁止转基因 书记:无力辨别只能禁止', 7 '多地制定雾霾预案限行...
js - 循环生成ul列表 渲染数据
李然RRR的博客
01-18 1891
当i != 0 时，要将其它的 <li>arr[i]</li> 插入到已经渲染出的<ul></ul>中，这也就是div 索引号为0的子节点的内部。
HTML的列表、表格、表单标签的使用
凌晨三点
06-04 580
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。< dl > < dt > 列表标题 </ dt > < dd > 列表描述 / 详情 </ dd > …… </ dl >< dl > < dt > 列表标题 </ dt > < dd > 列表描述 / 详情 </ dd > …… </ dl ></< dl > < dt > 列表标题 </ dt > < dd > 列表描述 / 详情 </ dd > …… </ dl >
原生JS三（循环）
CSDN_GMC的博客
04-06 467
原生JS--循环一. while循环二. for循环三. do while循环break和continue获取元素设置HTML中的文字通过js来修改HTML的样式 一. while循环 显示效果： 二. for循环 代码： 显示效果： 三. do while循环 该循环，不管是否满足条件都会进行循环体一次，while和for不会 代码： 显示效果： break和contin...
js_for循环
at sea
12-14 333
for循环介绍及问题
Jquery和JS获取ul中li标签的值以及赋值问题
热门推荐
09-15 2万+
通过点击li标签，拿到li值，在把值赋给一个文本框 以下是HTML，以及input标签<input type="hidden" id="orderBy" value="${orderBy}" > <input type="hidden" id="orderColumn " value="${orderColumn }" > <ul class="orderType" > <li va
原生js循环遍历
qq_16945933的博客
02-23 642
1、原生循环学习总结 // 【原生js循环】——1、while(只要条件为真则不断的循环代码,这会导致浏览器崩溃。) // while (条件) { // 要执行的代码块 // } var i = 0; while(i < 10){ i = i + 1 console.log(i) } // 【原生js循环】—— 2、do......while循环（先运行一次循环体，然后判断循环条件） // do { // 要执行的代码块 // }
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
10-14
此外，对于获取当前点击对象的其他属性，如内容，可以在事件处理函数中使用`event.target`。这个属性指向触发事件的DOM元素。例如，如果我们想获取`li`元素的内容，可以这样做： ```javascript methods: { ...
vue.js click点击事件获取当前元素对象的操作
10-14
总结一下，Vue.js中的`click`事件结合`$event`对象，可以帮助我们获取到触发事件的元素，以及元素的属性和内容。`currentTarget`和`target`分别用于获取事件绑定的元素和实际触发事件的元素。在循环列表中，我们还...
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
11-30
在本文中，我们将深入探讨如何使用Vue.js来创建一个基于`ul-li`标签的下拉列表，以此模拟原生的`select`标签功能。这个实例将涵盖Vue.js中的几个核心概念，包括组件的创建与使用、组件间的数据传递以及动态数据绑定...
jQuery动态添加li标签并添加属性和绑定事件方法
10-18
在示例代码中，`$("#listproject")`选取了ID为`listproject`的`ul`元素，然后使用`append()`方法在它内部添加`li`标签。这一步骤在循环中完成，将数组`JSarray`中的每个元素作为`li`的内容： ```javascript for(var...
获取鼠标点击元素的id
BIGDgreen
04-10 5900
该功能主要通过clickedId（）实现，可以将该函数封装起来，以便下次使用。 代码执行结果为将红色div变成黑色 上代码！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> ...
js获取当前点击的li的内容
qq_42103512的博客
06-17 1546
js获取当前点击的li的内容 主要是通过addEventListener监听当前点击事件，然后通过toElement获取innerHTML，从而得到li标签的内容。例： var oWidth = document.getElementById("width"); oWidth.addEventListener("click",function (e) { oBox.style.width = e.toElement.innerHTML+"px"; }) ...
08-Vue的循环遍历
蓝带的博客
03-01 1077
v-for遍历数组 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="app"> <!-- 1.在遍历...
通过js的for循环实现通过悬浮向div里添加ul和li标签
jack_2326的博客
09-04 6215
这里写自定义目录标题 首先需要创建一个数组保存li标签里的内容，然后循环输出，再使用ul标签和li标签串联输出 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
js获取元素对象方法及常见事件绑定
weixin_45085122的博客
01-25 563
1、DOM事件中绑定2、js代码中绑定3、绑定事件监听函数。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
最新发布
feixin369的博客
07-14 422
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
for 循环ul li 生成树形图
06-03
好的，下面是一个使用 `for` 循环来生成树形结构的示例代码： ```html <ul id="tree"></ul> ``` ```javascript const data = [ { id: 1, name: '节点1', parentId: 0 }, { id: 2, name: '节点2', parentId: 1 },...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值