html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>复选框</title>

		<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>

		<script type="text/javascript" src="js/test.js" ></script>

	</head>

	<body>

		<form method="post" action="">

你的爱好是:

<br />

<input type="checkbox" name="checkbox1" value="看书" />看书

<input type="checkbox" name="checkbox1" value="唱歌" />唱歌

<input type="checkbox" name="checkbox1" value="跳舞" />跳舞

<input type="checkbox" name="checkbox1" value="运动" />运动

<br />

<input type="button" id="CheckedAll" value="全 选" />

<input type="button" id="CheckedNo" value="全不选" />

<input type="button" id="CheckedRev" value="反选" />

<input type="button" id="send" value="提交" />

	</body>

</html>

　　js

$(document).ready(function(){

        $("#CheckedAll").click(function() {

        	$("[name=checkbox1]:checkbox").attr("checked",true);

        })

        $("#CheckedNo").click(function() {

        	$("[name=checkbox1]:checkbox").attr("checked",false);

        })

        $("#CheckedRev").click(function() {

        	$("[name=checkbox1]:checkbox").each(function () {

        		this.checked=!this.checked;

        	})

        })

       $("#send").click(function(){

		var str = "你的爱好是:\r\n";

		$("[name=checkbox1]:checkbox:checked").each(function(){

		str+=$(this).val()+"\r\n";	

			});

		alert(str);	

			});

	});

　　 效果：

jquery 实现复选框选择效果的更多相关文章

  1. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  2. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  3. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  4. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  5. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  6. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  7. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  8. jquery判断复选框是否选中

    jquery判断复选框是否被选中 $(function(){ $(document).on("click", ".checkbox",function(){ v ...

  9. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

随机推荐

  1. 【串线篇】Mybatis缓存简介

    缓存:暂时的存储一些数据:加快系统的查询速度... CPU: 主频:4-2.7GHZ 内存:4G-8G    1333MHZ    2166MHZ CPU:一级缓存(4MB):二级缓存 (16MB); ...

  2. ARC102E - Stop. Otherwise... 组合计数

    枚举 \(i\),然后可以把 \(j\) 和 \(i - j\) 绑定成一对.把一对看成一个整的元素,与别的没有被绑定的数一起来参与选择就可以了. 但是由于实际上一对中的数是可以二选一的,所以不妨令 ...

  3. jQuery中keyup() 和 keydown()方法

    kuydown()方法与上方用法一样:一个按键松开执行代码,一个按键按下执行.

  4. Ubuntu下使用天河注意事项

    把下载的.cgi登陆文件用文本编辑器打开,修改端口 用管理员权限打开.cgi才能绑定端口 $ gksu nautilus # browse files as root $ gksu gedit /et ...

  5. day07作业猜年龄游戏

    # 给定年龄,用户可以猜三次年龄 # # 年龄猜对,让用户选择两次奖励 # # 用户选择两次奖励后退出 get_prize_dict = {} # 获取的奖品信息 age = 18 inp_count ...

  6. LVS负载均衡中arp_ignore和arp_annonuce参数配置

    先简单的介绍下关于LVS负载均衡 LVS(Linux  Virtual Server)Linux服务器集群系统 针对高可伸缩,高可用服务的需求,给予IP层和内容请求分发的负载均衡调度解决方法,并在Li ...

  7. laravel框架手动删除迁移文件后再次创建报错

    手动删除laravel框架数据表迁移文件后再次创建报错 如下图: 执行创建操作之后会在autoload_static.php及autoload_classmap.php这两个文件中添加迁移文件的目录. ...

  8. 113、TensorFlow变量集合

    #一个tensorflow程序断开的部分可能要创建变量 # 如果有一种方法来访问所有的变量是非常有用的 #因为这个原因TensorFlow提供了集合,是一些张量的集合 #或者是其他的对象,就像tf.V ...

  9. Problem accessing /jenkins/. Reason:

    这是一个Jenkins的Bug.临时解决方法是:在浏览器中手工输入:http://<ip>:<port>.不要访问"/jenkins"这个路径.

  10. DT时代，如何成为十字复合型数据分析师

    DT时代,如何成为十字复合型数据分析师 当前社会正从IT到DT智能时代,传统行业嫁接互联网,产生的是加法效应:大数据创新驱动,产生的是乘法效应,价值呈指数递增.DT时代拼的是人才和创新价值的能力,拼的 ...