实现原理:

  给所有的复选框取相同的名字,当点击全选的时候把chenked属性全部设置为true;当点击全不选的时候把checked属性设置为false;

源代码如下:

html代码:

<form method="post" action="">
你的爱好是:<input type="checkbox" id="CheckedAll" />全选/全不选
<br />
<input type="checkbox" name="one" value="唱歌" />唱歌
<input type="checkbox" name="one" value="跳舞" />跳舞
<input type="checkbox" name="one" value="看书" />看书
<input type="checkbox" name="one" value="运动" />运动
<br />
<input type="button" id="send" value="提交" />
</form>

js代码:

<script type="text/javascript">
$(document).ready(function(){
$("#CheckedAll").click(function(){
if (this.checked){
$("[name=one]:checkbox").attr("checked",true);
}else{
$("[name=one]:checkbox").attr("checked",false);
}
/* $("[name=checkboxt]:checkbox").attr("checked",this.checked);*/
});
$("#send").click(function(){
var str ="你的爱好是:\r\n";
$("[name=one]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
});
</script>

jquery实现复选框全选反选的更多相关文章

  1. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  2. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Jquery表格变色 复选框全选,反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  4. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  6. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  9. jQuery中的几个案例:隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  10. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

随机推荐

  1. swift和 oc 混编2-备

    在Swift语言出现之前,开发iOS或OS X应用主要使用Objective-C语言,此外还可以使用C和C++语言,但是UI部分只能使用Objective-C语言. 选择语言 Swift语言出现后,苹 ...

  2. js new Date().Format

    /** * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 ...

  3. Ubuntu 下启动/停止/重启mysql服务

    1:sudo start mysql 2:sudo stop mysql 3:sudo restart mysql

  4. nodejs 记入

    1. vs2015 使用最新的 nodejs refer : http://josharepoint.com/2016/05/04/how-to-configure-visual-studio-201 ...

  5. 一道考验你设计能力的C++编程题

    http://www.cppblog.com/weiym/archive/2012/06/12/178472.html

  6. COJ 0359 xjr考考你数据结构(根号2)线段树区间增加

    xjr考考你数据结构(根号2) 难度级别:C: 运行时间限制:3000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 请你编写一个数据结构,完成以下功能: 1)求出第 ...

  7. JQ无法修改input的type属性的替代解决方法

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...

  8. HDOJ 1194 Beat the Spread!(简单题)

    Problem Description Superbowl Sunday is nearly here. In order to pass the time waiting for the half- ...

  9. Linux中断分层技术

    一.中断嵌套  当系统正在执行某中断处理函数时,又产生了一个新的中断,这就叫做中断嵌套.当中断为慢速中断时,新的中断会取代当前中断,即当前中断没有执行完就结束 了:当中断为快速中断时,新的终端就不会产 ...

  10. 高性能Web服务器Nginx及相关新技术的应用实践-张宴

    http://files.cnblogs.com/files/niaowo/%E9%AB%98%E6%80%A7%E8%83%BDWeb%E6%9C%8D%E5%8A%A1%E5%99%A8Nginx ...