jQuery浅学之自增索引值来动态添加checkbox

最新推荐文章于 2024-07-19 09:49:20 发布

Michael II

最新推荐文章于 2024-07-19 09:49:20 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery学习文章标签：动态添加checkbox 自增索引值动态添加checkbox

本文链接：https://blog.youkuaiyun.com/YYxiaobao0726/article/details/88683229

jQuery学习专栏收录该内容

16 篇文章

订阅专栏

博主因jQuery掌握不足，在动态添加checkbox时死磕许久。主要涉及全局变量、字符串拼接和获取动态id值等问题，代码注释详细，还欢迎读者对代码有疑问时留言评论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来是很简单的，jQuery学的不好，死磕了半天。详见下面的代码吧，注释做的很详细了。（注释掉的代码为无用的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" 
    			href="../css/jquery.mobile-1.4.5.min.css">
    	<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.mobile-1.4.5.min.js" ></script>
	</head>
	<body>
		<div data-role="page"> 
			<div data-role="header">
				按钮
			</div>
			<div data-role="content" id="ctx">
				<button id="btn1">增加checkbox</button>
				<!--<button id="btn2">修改checkbox的选值</button>-->
				<input type="checkbox" id="cls1">
				<label for="cls1">全选</label>
			</div>
		</div>
		<script>
			var index = 0;// 索引值 设置为全局变量
			//var index2 = 0;
			//var Array = [];   存放点击之后产生的索引值，作为数组的空间大小
			$("#btn1").click(function(){
				var result ="<input type='checkbox' class='yy' id='number"+index+"'>"
				  + "<label for='number"+index+"' >玩游戏</label>";
				$("#ctx").append(result);	
				//console.log($("#chk2"));
				
				//动态添加checkbox时，需要调用checkboxradio()来渲染样式
				$("#"+"number"+index).checkboxradio();       //获取动态id值 "#"+"number"+index
				index ++;   //索引值 自增  局部变量
				
				//index2 = index;    //将局部变量index交换给全局变量index2
				//Array.push(index); 
				//alert(Array);// 将索引值push到数组中
			})
			
			$("#cls1").click(function(){
				$(".yy").prop("checked",$(this).prop("checked"));
				$(".yy").checkboxradio("refresh");
			})
			
		</script>
	</body>
</html>