像指定位置中写入类容，并去掉未选中的内容-CSDN博客

本文链接：https://blog.csdn.net/qq_39919491/article/details/113918372

这个示例展示了如何使用layui.js库结合jQuery来处理HTML页面中的多选框。当用户点击某个选项时，对应的选中内容会被显示在一个div中。全选和取消全选的按钮功能也得到了实现，方便用户批量选择和清除选择。点击事件监听并更新结果显示区，实现了内容的动态更新。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<script type="text/javascript" src="../layui/layui.js"></script>
	</head>
	

	<body>
		<div id="tochoose">
		<a> <input type="checkbox"><span >高兴1</span></a></br>
		<a><input type="checkbox" ><span>哈哈</span></a></br>
		<a><input type="checkbox" ><span>高兴2</span></a></br>
		<a><input type="checkbox" ><span>高兴3</span></a></br>
		<a><input type="checkbox" ><span>高兴4</span></a></br>
		<a><input type="checkbox" ><span>高兴5</span></a></br>
		<button id="btn">全选bai</button>
		<button id="btn1">取消全选</button>
		</div>
		
		==================================
		<div >
			<span id="res">
				123
			</span>	
		</div>
	</body>
	<script type="text/javascript">
		layui.use(['jquery'], function() {
			var $ = layui.jquery;
			$("#tochoose a").click(function(){
				var addStr = "" ;
				$("#tochoose a").each(function(){
					var resdate = $(this);
					var contexts =resdate.context;
					var childs = contexts.children;
					var ipu = childs[0];
					var spa =childs[1];
					var towrite =spa.innerText;
					if(ipu.checked){
						addStr +=towrite+"</br>"
					}
				});
                                // 将已经写入到div中的类容置空
				$("#res").text("");			
				$("#res").append(addStr);
			});
		});
	</script>
</html>

主要实现的功能：通过点击多线框，实现将备选选框中的类容写到一个div中，each中var获取的值均为调试获取到的值。本人使用的layui.js 加载调用的jquery，直接换成jquery也行