• 案例演示

  • 源代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>鱼香肉丝</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小葱拌豆腐</td>
<td>田老师</td>
</tr> </tbody>
</table>
</div> <script> var cksAll=document.getElementById('j_cbAll');
var cks = document.getElementById('j_tb').getElementsByTagName("input");
cksAll.onclick=function() {
for (var i = 0; i < cks.length; i++) {
cks[i].checked=this.checked; }
}; for(var i=0;i<cks.length;i++){
cks[i].onclick=function(){
var flag=true;
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
flag=false;
break;
}
}
cksAll.checked=flag;
};
}
</script>
</body>
</html>

全选和不全选》.html

 
  • 具体实现 
  • 思想方法

//全选:点击全选按钮,其他的小按钮都选中,说明小按钮的状态是跟着全选按钮而变化的

//不全选:小按钮有一个没选择,全选不选中

  • 核心代码

      //获取全选按钮
    var cksAll=my$("j_cbAll");
    //获取其他小按钮
    var cks = my$("j_tb").getElementsByTagName("input");
    //实现点击全选按钮,小按钮的状态跟着全选按钮变化
    cksAll.onclick=function() {
    for (var i = 0; i < cks.length; i++) {
    cks[i].checked=this.checked; }
    };

    //遍历每一个小按钮
    for(var i=0;i<cks.length;i++){
    //为每一个按钮注册点击事件
    cks[i].onclick=function(){
    //开始默认全都选中
    var flag=true;
    for(var j=0;j<cks.length;j++){
    //循环过程中如果有一个小按钮没被选中,就将flag=false,并且此时不需要继续遍历了
    if(!cks[j].checked){
    flag=false;
    break;
    }
    }
    //全选按钮状态和flag相同
    cksAll.checked=flag;
    };
    }

原生JS实现全选和不全选的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. 原生JS实现全选,反选

    无样式,比较丑 <!DOCTYPE html><html><head><meta charset="UTF-8"><title ...

  3. js实现CheckBox全选或者不全选

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

  4. jQuery给CheckBox全选与不全选

    $(function(){ $("#checkAll").click(function() {//全选 $('input[name="DATA"]').prop ...

  5. jquery全选或不全选时,不操作已经禁用的checkbox

    $("#selectAll").click(function(){ if(this.checked ){ $(":checkbox[name='equid']" ...

  6. jquery 取消全选和全选功能 不全选

    代码如下 function ckSelectAll() { if ($('#ckSelectAll').is(':checked') == true) { $("INPUT[name='ch ...

  7. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  8. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  9. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

随机推荐

  1. C#使用WebClient下载文件到本地目录

    C#使用WebClient下载文件到本地目录. 1.配置本地目录路径 <appSettings> <!--文件下载目录--> <add key="Downloa ...

  2. 洛谷 P1484 种树

    题目描述 cyrcyr今天在种树,他在一条直线上挖了n个坑.这n个坑都可以种树,但为了保证每一棵树都有充足的养料,cyrcyr不会在相邻的两个坑中种树.而且由于cyrcyr的树种不够,他至多会种k棵树 ...

  3. css中绝对定位和相对定位详解

    相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...

  4. springMVC整理04--文件上传 & 拦截器 & 异常处理

    1.  文件上传 SpringMVC 的文件上传非常简便,首先导入文件上传依赖的 jar: <!-- 文件上传所依赖的 jar 包 --> <dependency> <g ...

  5. 「Splay」区间翻转

    传送门:>Here< 解法分析 用splay来维护这个序列. 一直没有搞明白的是,这里的splay的节点究竟维护的是什么?是权值吗?肯定不是,因为区间是会翻转的,如果维护权值的话很快平衡树 ...

  6. ram自己写?用IP?

    前言 ram这种东西,可以用ip方便,也可以自己写代码描述它. 以下讨论单口ram:8bit*256 流程 1.IP: 使用IP当然是最方便的事情啦,但可移植性差而且可定制性较差. 仿真波形: 2.V ...

  7. 【CTSC2017】【BZOJ4903】吉夫特 卢卡斯定理 DP

    题目描述 给你一个长度为\(n\)的数列\(a\),求有多少个长度\(\geq 2\)的不上升子序列\(a_{b_1},a_{b_2},\ldots,a_{b_k}\)满足 \[ \prod_{i=2 ...

  8. 【XSY1580】Y队列 容斥

    题目大意 给你\(n,r\),求第\(n\)个不能被表示为\(a^b(2\leq b\leq r)\)的数 \(n\leq 2\times {10}^{18},r\leq 62\) 题解 我们考虑二分 ...

  9. thymeleaf中js跳转到另外一个页面

    <script type="text/javascript"> setTimeout("location.href='index'", 3000); ...

  10. zabbix agent 自定义 UserParameter

    有时候我们想让被监控端执行一个zabbix没有预定义的检测,zabbix的用户自定义参数功能提供了这个方法.我们可以在客户端配置文件zabbix_angentd.conf里面配置UserParamet ...