实现原理:

  给所有的复选框取相同的名字,当点击全选的时候把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. Html中input标签的使用

    1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...

  2. Entity Framework with MySQL 学习笔记一(查询)

    参考 : http://msdn.microsoft.com/en-us/data/jj574232.aspx EF 查询基本上有3中 默认是 Lazy Loading 特色是只有在需要数据的时候EF ...

  3. DOCKER脚本一例---快速建立大批测试机

    这个会由一系列的脚本构成,比如: 系统重启后,如何快速恢复服务,如何建立网桥(也可一次写入),如何在新系统上快速部署. ADDBRIDGE #!/bin/sh br_name=br100 brctl ...

  4. MCS-51单片机内部结构

    8051是MCS-51系列单片机的典型产品,我们以这一代表性的机型进行系统的讲解. 8051单片机包含中央处理器.程序存储器(ROM).数据存储器(RAM).定时/计数器.并行接口.串行接口和中断系统 ...

  5. 【C++基础之十一】虚函数的用法

    虚函数的作用和意义,就不进行说明了,这里主要讨论下虚函数的用法. 1.典型的虚函数用法 可以看到,只有标识为virtual的函数才会产生多态的效果,而且是编译多态.它只能借助指针或者引用来达到多态的效 ...

  6. POJ_3009——冰球,IDS迭代加深搜索

    Description On Planet MM-21, after their Olympic games this year, curling is getting popular. But th ...

  7. vs2010 sp1 创建silverlight 时,提示我 “在创建silverlight项目之前,您需要安装最新的silverlight Developer运行时

    ---恢复内容开始--- Silverlight 5 Developer Rumtime (32bit): http://go.microsoft.com/fwlink/?LinkId=229323 ...

  8. 《图解HTTP》 第11章 web的攻击技术

    11.1 针对Web的攻击技术 简单的HTTP协议本身并不存在安全性问题,所以协议本身几乎不会成为攻击的对象. 11.1.1 HTTP不具备必要的安全功能 11.1.2 在客户端即可篡改请求 在HTT ...

  9. markdown转dokuwiki

    markdown markdown格式变得越来越通用,很多博客,云笔记,github等等都支持markdown编写,markdown也能很方便的转化为pdf,html等格式.公司的文档用的dokuwi ...

  10. HTML的表格玩法

    HTML的表格玩法 HTML也是可已展示表格的,大体结构如下 <!DOCTYPE html> <html lang="en"> <head> & ...