JSjQuery全选反选父项子项联动多选框

全选反选父项子项联动多选框

js代码：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>全选</title></head><body><input type="checkbox" id="btn1">全选<div id="div1">    <input type="checkbox" name="id">    <input type="checkbox" name="id">    <input type="checkbox" name="id"></div><script>    var oBtn1=document.getElementById('btn1');    var aDiv=document.getElementById('div1');    var aCheck = document.getElementsByName("id");    oBtn1.οnclick=function(){        for(var i=0; i<aCheck.length; i++){            if(oBtn1.checked==true){                aCheck[i].checked=true;            }            else{                aCheck[i].checked=false;            }        }

    };    for(var i=0; i<aCheck.length; i++){        var n=0;        aCheck[i].οnclick=function(){            if(this.checked){                n+=1;//获取被选中的input元素长度            }else{                n-=1;            }            if(n==aCheck.length){                oBtn1.checked = true;            }else{                oBtn1.checked = false;            }        }    }</script>

</body>

</html>

jQuery代码：

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script><script>    $(function(){        $('#btn1').click(function(ev){            $('INPUT[name=id]').attr('checked',$('#btn1').prop('checked'));        });        $('INPUT[name=id]').click(function(ev){            $('#btn1').attr('checked',                    $('INPUT[name=id]:checked').length == $('INPUT[name=id]').length);        });    });</script>

转载于:https://www.cnblogs.com/zhangyu00/p/6686699.html

JSjQuery全选反选父项子项联动多选框相关推荐

JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
Vue excel导出，多选一级父级选中，勾选，全选，取消（根据列名导出）
1,首先设置按钮,弹出弹框 <el-button type="primary" @click="memberExcelExportHandle()" :d ...
js 下拉层级多选_Jquery实现select二级联动多选下拉菜单
前言平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
原生js--选项卡全选反选，选项卡切换,模拟搜索框，微博发布（带时间）,注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...
php 全选反选,利用vue实现全选反选功能
这次给大家带来利用vue实现全选反选功能,利用vue实现全选反选功能的注意事项有哪些,下面就是实战案例,一起来看一下. 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比 ...
7.20 Bootstrap、企业黄页2.0、form表单、全选不选反选
Bootstrap.企业黄页2.0.form表单.全选不选反选一.Bootstrap PPT内容 HTML中导入Bootstrap Bootstrap教程网站二.企业黄页2.0 三.form表单 ...
php输入文本框样式,【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...
Topic 1 : 检测用户的输入 : 题目要求: 编写一个用户注册页面检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 : 代码如下 : 用户注册页面 .bg {back ...
jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

JSjQuery全选反选父项子项联动多选框

JSjQuery全选反选父项子项联动多选框相关推荐

最新文章

热门文章