JavaScript

超轻量级php框架startmvc

jQuery实现遍历复选框的方法示例

更新时间:2020-04-28 02:30:01 作者:startmvc
本文实例讲述了jQuery实现遍历复选框的方法。分享给大家供大家参考,具体如下:1、问题

本文实例讲述了jQuery实现遍历复选框的方法。分享给大家供大家参考,具体如下:

1、问题背景:

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

2、实现代码:


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>遍历复选框</title>
 <script type="text/javascript" src="jquery-1.7.2.min.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、运行效果图:

jQuery 遍历 复选框