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. Python3.5-20190519-廖老师-自我笔记-面向对象中slots变量--@property的使用

    python是动态语言,可以随时随地给实例对象添加属性和方法,但是我们想限制属性的名字,可以使用__slots__特殊变量来限制 使用__slots__要注意,__slots__定义的属性仅对当前类实 ...

  2. mysql 数据库连接状态查询

    查看当前数据库进程 show processlist

  3. vue tab切换布局

    页面 功能 点击tab1和tab2,content内容切换content1和content2 <template> <div> <div class="tab& ...

  4. Redis5离线安装

    1. 直接上redis官网安装包, 然后上传服务器 https://redis.io/download 2. 解压 tar -zxvf redis-5.0.6.tar.gz 3. 进入redis根目标 ...

  5. 04 SecurityContextHolder与SecurityContext说明

    该篇记录一下SecurityContextHolder与SecurityContext两个类,当然还有与它们关系密码的SecurityContextPersistenceFilter.java这个过滤 ...

  6. 对于vue绑定的model值里边get和set的小动作

    先看下例子: template里边内容: <el-form-item label="导航条类型"> <el-radio-group v-model="n ...

  7. （转）maven怎么 引入(或引用/使用) 自定义(或本地/第三方) jar的三种方式 图文教程 方法二最简单

    转:https://blog.csdn.net/wabiaozia/article/details/52798194 准备工作: 假如我有一个自定义jar是:123456.jar,下载地址http:/ ...

  8. python input() 与raw_input()

    使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的1:纯数字输入 当输入为纯数字时 input返回的是数值类型,如int,float   ...

  9. (60)c# com com+ dcom

    一.创建COM组件 1.创建项目 2.设置使程序集可见 AssemblyInfo.cs中flase改为ture 或者 项目属性 设置可见 3.Guid生成器 在开始程序下能够找到Guid生成器 每次都 ...

  10. Linux（Ubuntu）常用命令（一）

    Linux先知: Linux历史: 关于这个我就不再多说了,其实是一个很有意思的故事串,网上找下一大堆. 类Unix系统目录结构: ubuntu没有盘符这个概念,只有一个根目录/,所有文件都在它下面 ...