实现原理:

  给所有的复选框取相同的名字,当点击全选的时候把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. 《python基础教程》笔记之 其它语句1

    print 相关 print可以打印多个表达式,只要将它们用逗号隔开就好,结果中每个参数之间都会插入一个空格,使用+可以避免空格,如 >>> print 'age:',42age: ...

  2. C程序设计语言练习题1-18

    练习1-18 编写一个程序,删除每个输入行末尾的空格及制表符,并删除完全是空格的行. 代码如下: #include <stdio.h> // 包含标准库的信息. #define MAXLI ...

  3. c语言输入一行未知个数数字存入数组

    一直有个疑问输入一行数字存入数组时若不知道数字的个数怎么办,最容易想到的办法就是接收字符然后转化为数字,但这样太过麻烦. 今天上网查了下,说可以用ungetc()函数将字符送回输入流,在这里总结归纳一 ...

  4. MSP430 中断优先级

    MSP430的中断优先级.打开关闭.中断嵌套 优先级顺序从高到低为:    PORT2_VECTOR (1 * 2u) /* 0xFFE2 Port 2 */    PORT1_VECTOR (4 * ...

  5. SVM的点滴

    SVM 1. 普通SVM的分类函数可表示为: 其中ai为待优化参数,物理意义即为支持向量样本权重,yi用来表示训练样本属性,正样本或者负样本,为计算内积的核函数,b为待优化参数. 其优化目标函数为: ...

  6. MongoDB insert/update/one2many案例

    以博文与评论为例,博文有标题内容,对应多个评论,评论有评论人.评论内容等. ()插入一条博文: db.blog.insert( {','title':'this is blog title1','co ...

  7. 10 001st prime number

    这真是一个耗CPU的运算,怪不得现在因式分解和素数查找现在都用于加密运算. By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13 ...

  8. maven下载及配置

    Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...

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

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

  10. 就是一段程序,可以求出N个不等长列表中取N个元素形成的所有组合

    def get_result_in_vector(vector, N, tmp, tmp_result): """ :param vector:所有组合的拼接 :para ...