设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消。全选后点击某个子选框,全选也能取消。当四个子选框都选中时,全选框也被选择。

实现代码:

<script>
var a=document.getElementById("a");
var b=document.getElementsByClassName("b");
//全选与取消全选
var y=true;
a.onchange=function(){ if(a.checked){
for (var i=0;i<b.length;i++)
b[i].checked = true;
}else{
for (var i=0;i<b.length;i++) {
b[i].checked =false; };
}; };
//子选框选择判定全选选框(第一种实现方法)
for (var i=0;i<b.length;i++) {
b[i].onchange=function(){
a.checked = true;
for (var i=0;i<b.length;i++) {
if (!b[i].checked) {
a.checked=false;
break;
} } }
} //子选框选择判定全选(第二种实现方法) // var n = 0;
// for (var i=0;i<b.length;i++) {
// b[i].onchange=function(){
// n = 0;
// for(var i = 0; i < b.length; i++)
// {
// if(b[i].checked==true){
// n++;
// }
// if(n>=4){
// alert(n);
// a.checked = true;
// } else{
// a.checked = false;
// }
//
// }
// }
//}

  

js 全选选框与取消全选代码的更多相关文章

  1. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  2. Android开发CheckBox控件,全选,反选,取消全选

    在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...

  3. JavaScript实现单击全选 ,再次点击取消全选

                 以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...

  4. js弹出确认框,挺全

    一种: <a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.google.com'">弹 ...

  5. js select下拉框下拉跳转代码

    下拉跳转原理很简单这个用到了select的onchangeg事件,只要这里改变我们就获取select值直接location.href=this.value即可. <select name=&qu ...

  6. JS或jQuery实现一组复选框的全选和取消全选?

    //1.JS方式实现:checkbox 全选/取消全选  var isCheckAll = false;  function swapCheck() {    if (isCheckAll) {    ...

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

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

  8. 前端之 JS 实现全选、反选、取消选中

    需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...

  9. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

随机推荐

  1. 编译Openwrt的log

    Openwrt配置: Target System (Ralink RT288x/RT3xxx) ---> Subtarget (MT7688 based boards) ---> Targ ...

  2. docker的容器可视化工具portainer

    1.搜索镜像 [root@holly ~]# docker search portainer 2.下载portainer [root@holly ~]# docker pull portainer/p ...

  3. padding填充与box-sizing: border-box配合使用

    不管伸缩盒还是浮动盒子,只要使用到padding,就必须使用 box-sizing: border-box;     有图片的时候,需摇与其他文字对齐的时候,在图片的外层加个:vertical-ali ...

  4. 对SHH的公钥和私钥的简单理解

    SSH是在应用层和传输层基础上的安全协议 SSH提供了两种级别的安全验证: 第一基于密码的安全验证:账号.密码,但可能有别的服务器冒充真正的服务器,无法避免被“中间人”攻击(man-in-the-mi ...

  5. 树网的核(codevs 1167)

    题目描述 Description [问题描述]设 T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T 为树网(treenetwork),其中V, E分别表 ...

  6. GIT的API主要应用示例

    这几个简单的API应用,主要是通过TOKEN来获取GIT内空的例子. 但在获取GIT的文件列表时,要注意区分目录和文件的MODE差别( 100644 普通文件 040000 普通目录 ). impor ...

  7. kendo Grid的toolbar自定义

    由于这个toolbar官方进增加了create,save还有一个是_____ 所以想要自定义话就需要使用 下面的代码(这个是MVVM模式) data-toolbar='[{ template: Ken ...

  8. 各个领域常见的一些bug汇总

    一 Android系统功能测试设计的测试用例 a.对所测APP划分模块 b.详细列出每个模块的功能点(使用Xmind绘制功能图) c.使用等价类划分.边界值.场景发等对各功能点编写测试用例(考虑中断功 ...

  9. iOS开发使用Unwind Segue进行返回

    我们在之前的一篇博客中谈到怎样使用dismissViewControllerAnimation()的方法在iOS中返回,如今我们有一个更为方便的方法来实现界面跳转之后的返回操作.使用的是Unwind ...

  10. 『Spring.NET+NHibernate+泛型』框架搭建之Model(二)

    依照搭建项目的顺序来比較好描写叙述一些,我一般先搭建实体层,本节内容纯属于NHibernate范畴.先上图和代码,然后对着图和代码逐一解说,以角色表为例:   T_Role表: 数据库表设计非常eas ...