js中实现复选框的全选，全不选以及反选，分为两种情况：

（1）选中“请选择”前面的复选框实现全选，不选中“请选择”前面的复选框实现全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="jquery-1.9.1.js"></script>

<title>无标题文档</title>

</head>

<script>

  function check_inter(){

    var inters = document.getElementsByName("inter");

    for(var i=0;i<inters.length;i++){

        if(document.getElementById("cbox").checked==true){

          inters[i].checked = true;

        }else{

          inters[i].checked = false;

        }

    }

  }

</script>

<body>

<input type="checkbox" id="cbox" value="" onclick="check_inter()"/>请选择</br>

<input type="checkbox" name="inter" value="下棋"/>下棋</br>

<input type="checkbox" name="inter" value="游戏"/>游戏</br>

<input type="checkbox" name="inter" value="看书"/>看书<br/>

</body>

</html>

（2）全选、全不选、反选三个按钮实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<script>

//全选,全不选

  function checkall(param){

    var inters = document.getElementsByName("inter");

    for(var i=0;i<inters.length;i++){

        if(!param){

            inters[i].checked = true;

        }else{

            inters[i].checked = false;

        }

    }

  }

//反选

  function uncheck(){

    var inters = document.getElementsByName("inter");

    for(var i=0;i<inters.length;i++){

        inters[i].checked = !inters[i].checked;

    }

  }

</script>

<body>

<input type="checkbox" name="inter" value="下棋"/>下棋<br/>

<input type="checkbox" name="inter" value="游戏"/>游戏<br/>

<input type="checkbox" name="inter" value="看书"/>看书<br/>

<input type="button" onclick="checkall()" value="全选"/>

<input type="button" onclick="checkall('un')" value="全不选"/>

<input type="button" onclick="uncheck()" value="反选"/>

</body>

</html>

js实现复选框的全选、全不选、反选的更多相关文章

  1. 复选框（checkbox）、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  2. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  3. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  4. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  6. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  7. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  8. checkbox 多选框 ：jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    <input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...

  10. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

随机推荐

  1. 重学STM32---（三） 中断分组和优先级

    看了大半天,终于把原子哥的例程中的中断分组和优先级看懂了,勉勉强强知道了怎么设置中断分组和优先级,,不容易啊.下面就是我收集的资料及我的理解 分组不是很难,就是有一点知道就就全部明白了: // 设置N ...

  2. 常用http请求状态码含义

    1**  ----临时响应 2**  ----成功响应 3**  ----重定向 4**  ----请求错误 5**  ----服务器错误 常用的几个如下: 200---服务器成功返回网页 301-- ...

  3. 一步一步理解GB、GBDT、xgboost

    GBDT和xgboost在竞赛和工业界使用都非常频繁,能有效的应用到分类.回归.排序问题,虽然使用起来不难,但是要能完整的理解还是有一点麻烦的.本文尝试一步一步梳理GB.GBDT.xgboost,它们 ...

  4. USB相关的网络资料

    相关资源连接: USB官网:http://www.usb.org/home <USB in a NutShell>: http://www.beyondlogic.org/usbnutsh ...

  5. eclipse关联源码 Failed to create the part's controls

    在eclipse中关联源码时: 1.出现Failed to create the part's controls错误, 2.而attach source 这个按钮却没有出现. 问题原由:eclipse ...

  6. java apache commons HttpClient发送get和post请求的学习整理(转)

    文章转自:http://blog.csdn.net/ambitiontan/archive/2006/01/06/572171.aspx HttpClient 是我最近想研究的东西,以前想过的一些应用 ...

  7. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  8. python数据结构与算法——小猫钓鱼(使用队列)

    按照<啊哈>里的思路实现这道题目,但是和结果不一样,我自己用一幅牌试了一下,发现是我的结果像一点,可能我理解的有偏差. # 小猫钓鱼 # 计算桌上每种牌的数量 # 使用defaultdic ...

  9. 2015GitWebRTC编译实录7

    2015.07.20 libvoiceengine 编译通过去除了mock测试代码,mock是用来进行测试的,意义不大.另外会报一个常量错误,需要定义WEBRTC_MAC宏,只定义WEBRTC_IOS ...

  10. Lumia刷机Win10 Mobile 10.0.10166惊魂记

    1 手贱,不愿等正式版正式发布,结果手动更新了,为此还熬了两个晚上. 2 第一次撞上去,没有无线了,倒.一开始还以为是预览版BUG,后来查了下重置就可以了,可以没有3G,没有WIFI也没办法备份,干, ...