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. spark的知识的链接

    IDEA 创建scala spark的Mvn项目:https://blog.csdn.net/u014646662/article/details/84618032 Spark详解03Job 物理执行 ...

  2. Hadoop中的排序和连接

    MapReduce的全排序 主要是为了保证分区排序,即第一个分区的最后一个Key值小于第二个分区的第一个Key值 与普通的排序仅仅多一个自定义分区类MyPartitioner见自己所写的实验 (设置一 ...

  3. java基础复习（二）

    一. 基本语法 如果一个源文件中什么内容都没有,编译会不会生成 字节码文件?不会 如果一个类中没有主方法(如下图),编译运行会怎么样?编译可以通过,但运行报错 : 没有主方法 主方法 : 是一个特殊的 ...

  4. 人生苦短_我用Python_类与对象的概念_006

    Python类与对象的概念类和对象--->万事万物都对象物以类聚.人以群分 --->?划分标准性别分 男女 中性成绩分 优秀 良好 不及格 类->根据类的属性来划分类的实例-> ...

  5. Window平台下tree 命令使用

    WIndow 平台要想打印目录树,可以用cmd工具或者power shell 的tree命令实现 tree 命令格式和参数: TREE [drive:][path] [/F] [/A] /F 显示每个 ...

  6. 前端-个人网页开发最常用的插件Superslide 与 swiper

    给初入前端的同学,安利2个轮播图插件 SuperSlide 与 Swiper ! SuperSlide PC端与移动端 的轮播图特效都是分开写2个js插件,而Swiper 基本一个插件可以写PC端与移 ...

  7. 一个简单的JSP 连接MySQL使用实例

    一.软件环境 下载并安装MySQL,Tomacat,JDBC.MyEclipse或其他IDE. 二.环境配置 将其环境变量配置好之后,下载Java 专用的连接MySQL的驱动包JDBC,有人会发现在一 ...

  8. pycharm之black配置for python file（代码格式化工具）

    一.介绍下black 源码;https://github.com/ambv/blackpei 二.具体步骤 第一步 安装black: 从命令行安装:例如Windows的cmd窗口,运行命令pip3 i ...

  9. HTTP的FormData和Payload的传输格式

    FormData和Payload是浏览器传输给接口的两种格式,这两种方式浏览器是通过Content-Type来进行区分的(了解Content-Type),如果是 application/x-www-f ...

  10. inputAccessoryView，inputView

    我们在使用UITextView和UITextField的时候,可以通过它们的inputAccessoryView属性给输入时呼出的键盘加一个附属视图,通常是UIToolBar,用于回收键盘. 但是当我 ...