实现原理:

  给所有的复选框取相同的名字,当点击全选的时候把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. CentOS下安装postgresql

    一.说明 postgresql版本:9.4.1 安装包: postgresql94-server-9.4.1-1PGDG.rhel6.x86_64.rpm postgresql94-libs-9.4. ...

  2. XJOI网上同步测试DAY14 T2

    思路:先考虑在D高度的最小圆覆盖,再一层一层往下走时,可以保证圆心与最开始的圆相同的时候答案是最优的. 时间复杂度O(n) 有一个坑点,就是我用了srand(time(NULL))就T了,RP太差了. ...

  3. c语言内存模型

    文章一.C语言的内存分配模型 1.程序代码区:存放函数体的二进制代码. 2.全局区数据区:全局数据区划分为三个区域.全局变量和静态变量的存储是放在一块的,初始化的全局变量和静态变量在一块区域,未初始化 ...

  4. java并发6-小结

    为什么需要并发   并发其实是一种解耦合的策略,它帮助我们把做什么(目标)和什么时候做(时机)分开.这样做可以明显改进应用程序的吞吐量(获得更多的CPU调度时间)和结构(程序有多个部分在协同工作).做 ...

  5. 【疑难杂症】xmind启动后,自动退出的问题

    xmind安装一段时间后,就会出现一启动,就自动退出的情况.卸载重装也无法解决,在试过网上的各种方法后,发现这个方法最凑效. 打开xmind.ini(安装目录下),删除以下几行,保存配置文件,重启即可 ...

  6. HDOJ 1395 2^x mod n = 1

    Problem Description Give a number n, find the minimum x(x>0) that satisfies 2^x mod n = 1. Input ...

  7. Java---设计模式app小软件汇总应用

    写了一个app小软件,重点不在于软件,软件bug挺多,也没去修改. 这个小软件只是为了更好的说明和了解设计模块而做的. Java 程序设计–包结构 Java程序设计的系统体系结构很大一部分都体现在包结 ...

  8. GUID 的优缺点 uniqueidentifier

    1) 优点 同 IDENTITY 列相比,uniqueidentifier 列可以通过 NewID() 函数提前得知新增加的行 ID,为应用程序的后续处理提供了很大方便. 便于数据库移植,其它数据库中 ...

  9. IMS 相关名词解释

    IMS: IMS(IP Multimedia Subsystem)是IP多媒体系统,是一种全新的多媒体业务形式,它能够满足现在的终端客户更新颖.更多样化多媒体业务的需求. RCS:Rich Commu ...

  10. fuel部署openStack

    https://code.launchpad.net/fuel [fuel项目] http://www.imgburn.com/ [各种镜像制作工具]