前端

jQuery实现遍历复选框

云博小周宇1 Min Read

1、问题背景

     这里有10个复选框，根据选择的复选框获取其值，并将其值用“——”连接，插入到div中

 

2、实现源码

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>遍历复选框</title>
		<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
		<script> $(document).ready(function(){ $("#btn").click(function(){ var str = ""; $("input[name=‘ckb‘]").each(function(){ if($(this).is(":checked")) { str += "——" + $(this).val(); } }); $("#txt").html(str); }); }); </script>
	</head>
	<body>
	   <div>
	   	   <input type="checkbox" name="ckb" value="1" />1
	   	   <input type="checkbox" name="ckb" value="2" />2
	   	   <input type="checkbox" name="ckb" value="3" />3
	   	   <input type="checkbox" name="ckb" value="4" />4
	   	   <input type="checkbox" name="ckb" value="5" />5
	   	   <input type="checkbox" name="ckb" value="6" />6
	   	   <input type="checkbox" name="ckb" value="7" />7
	   	   <input type="checkbox" name="ckb" value="8" />8
	   	   <input type="checkbox" name="ckb" value="9" />9
	   	   <input type="checkbox" name="ckb" value="10" />10<br>
	   	   <input type="button" id="btn" value="遍历"/>
	   	   <div id="txt"></div>
	   </div>
	</body>
</html>


3、实现结果

 


再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow