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. json序列化反序列

    json只能处理简单的数据类型:字典 列表等... 文件只能存字符串和二进制 序列化:把内存的对象变为字符串 反序列化:将字符串变回为内存对象

  2. leetcode-166周赛-5282-转化为全0矩阵的最小反转次数

    题目描述: 方法一:暴力BFS class Solution: def minFlips(self, mat) -> int: R, C = len(mat), len(mat[0]) def ...

  3. java获取当月日期 和 周末

    /** * java获取 当月所有的日期集合 * @return */public static List<Date> getDayListOfMonth() { List list = ...

  4. 2，Spring MVC 学习总结（二）- 方法（Action）参数映射

    一,Controller层方法(Action)参数映射 1,自动参数映射 1.1,基本数据类型参数映射 方法的参数可以是任意基本数据类型,如果方法参数名与http中请求的参数名称相同时会进行自动映射. ...

  5. JS中的作用域及闭包

    1.JS中的作用域 在 es6 出现之前JS中只有全局作用域和函数作用域,没有块级作用域,即 JS 在函数体内有自己的作用域,但是如果不是在函数体的话就全部都是全局作用域.比如在 if.for 等有 ...

  6. UIStakView的添加与移除

    subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...

  7. Win7隐藏登录界面中的用户(不建议HOME版使用)

    一天一點 能登多高,靠的不是双脚!能看多远,靠的不是双眼!人生路,贵在坚持! Win7隐藏登录界面中的用户(不建议HOME版使用) Win7中如何隐藏不想出现在登录界面中的用户 在Windows系统管 ...

  8. 前端每日实战：33# 视频演示如何用纯 CSS 创作牛奶文字变换效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MGNWOm 可交互视频教程 此视频 ...

  9. 2018-2019-2 20175120 实验五《Java网络编程》实验报告

    实验报告封面 课程:Java程序设计 班级:1751班 姓名:彭宇辰 学号:20175120 指导教师:娄嘉鹏 实验日期:2019年5月26日 实验时间:13:10 - 15:25 实验序号:20 实 ...

  10. python中nonlocal 的作用域

    ''' nonlocal关键字用来在函数或其他作用域中使用外层(非全局)变量. ''' def work(): x = 0 def new_work(): nonlocal x x=x+3 retur ...