zoukankan      html  css  js  c++  java
  • jQuery实现遍历复选框

    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、实现结果


  • 相关阅读:
    15 react ajax 请求 github 用户信息
    14 react fetch
    13 React axios
    12 脚手架编写React项目(评论管理)---
    gitlab init project
    为什么是2MSL而不是MSL?
    mac python install zlib not available
    Laravel 传递数据到视图
    sleep(0)作用
    ping错误详解
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314189.html
Copyright © 2011-2022 走看看