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

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

原文地址:https://www.cnblogs.com/odejsjhshw/p/10373064.html

时间: 2024-10-12 19:52:17

jQuery实现遍历复选框的相关文章

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jquery点击复选框触发事件给input赋值

体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <sty

jquery中input复选框的checked属性

在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的checked属性,在控制台打印输出.css('checked'),结果为undefined, 不管在HTML中是否设置了checked='checked'; 2.通过attr添加属性即.attr('checked','abc'),会给HTML中input所在处添加checked='checked'这样的代码

jquery关于checkbox复选框是否被选中的问题

本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都是undefined,于是百度各种其他的方法: if ($('')get(0).checked) if($('').is(':checked')) 但是都不起作用,后来终于找到问题的原因了.我用的jquery是1.11.3,但是在1.6以后jquery便作出了改进,在页面加载完毕时,checkbox

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

【jQuery】对于复选框操作的attr与prop

这个是在jQuery1.6版本之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知,在jQuery中可以用attr()取出节点的属性,然而对于checkbox却不是这样了,比如我要取出其是否被选中的属性checked,attr("checked")去取没有选中的复选框是undefinded的,只能取出被选中复选框的属性.这个问题,导致我在一个条件判断中忙活了比较久的事件.查了一下发现,在jQuery1.6版本之后,你取复选框有没有被选中,要用prop

Jquery实现一组复选框单选

完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>

通过Jquery来处理复选框

实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 4:当点击反选按钮,选中的变没有选中,没有选中变选中 1 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> //这个是文件,每一次都要看这段代码有没有写 2 &

jquery修改Switchery复选框的状态

script //选择框 var mySwitch; /* * 初始化Switchery * * classNmae class名 */ function initSwitchery(className) { mySwitch = new Switchery($(className)[0], { color: "#1AB394" }); } /* * 切换Switchery开关函数 * * switchElement Switchery对象 * * checkedBool 选中的状态