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. mysql，分组后，再次进行过滤

    查出平均分大于80以上的班级 select class_id, avg(score) from students group by class_id having avg(score)>80;  ...

  2. less和vim中使用正则表达式搜索

    使用less查看 txt 文件之后,按\可以正则表达式来搜索: less phonelist.txt (232) 298-2265 (624) 381-1078 (540) 126-1980 (874 ...

  3. 03 spring security执行流程分析

    spring security主要是依赖一系列的Filter来实现权限验证的,责任链设计模式是跑不了的.下面简单记录一下spring操作这些Filter的过程. 1. WebSecurityConfi ...

  4. springMVC接收请求参数的几种方式

    1.  用注解@RequestParam绑定请求参数 用注解@RequestParam绑定请求参数a到变量a,当请求参数a不存在时会有异常发生,可以通过设置属性required=false解决,例如: ...

  5. Java反射学习-4 - 反射调用方法

    反射调用方法: package cn.tx.reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Method ...

  6. JS中Object的一些关于原型的方法

    1.Object.getPrototypeOf(obj) 该方法返回 obj 对象的原型对象,等同于 obj.__proto__.获取对象的原型对象推荐使用该方法而不是 obj.__proto__方法 ...

  7. AcWing 312. 乌龟棋 （简单DP）打卡

    题目:https://www.acwing.com/problem/content/description/314/ 题意:有一段路,每个格子都有个价值,然后有m张卡牌,四种类型,走1,2,3,4步, ...

  8. 在使用KVO遇到的一个问题

    在项目开发中定义了一个单例对象RHUserData的对象,RHOLUserInfo类是单例对象的一个property属性,RHOLUserInfo里面有个userId的属性,在其他类里面进行设置KVO ...

  9. docker-swarm笔记

    1.部署环境: centos7 创建三节点的 swarm 集群 swarm-manager 是 manager node : 192.168.1.150 swarm-worker1 和 swarm-w ...

  10. sdb报告-10 错误问题定位

    # sdb报告-10 错误问题定位在sdb 的集群环境中,如果面对的是一个高并发的操作场景,有时候会莫名其妙地报告 -10 错误. 在 sdb 的错误列表中,-10 错误代表:系统错误. 这是一个笼统 ...