js小效果-全选

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        window.onload=function(){            var aBtn=document.getElementsByTagName(‘input‘);            var count=0;            aBtn[0].onclick=function(){                if(this.checked==true){                    for(var i=1;i<aBtn.length;i++){                       aBtn[i].checked=true;                    }                    count=aBtn.length-1;                    document.title=count;                }else{                    for(var i=1;i<aBtn.length;i++){                        aBtn[i].checked=false;                    }                    count=0;                    document.title=count;                }

};            for( var i=1;i<aBtn.length;i++){                aBtn[i].onclick=function(){                    if(this.checked==true){                        count++;                    }else{                        count--;                    }                    if(count==aBtn.length-1){                        aBtn[0].checked=true;                    }else{                        aBtn[0].checked=false;                    }                    document.title=count;                }            };        }    </script></head><body><input type="checkbox" /><hr/><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /></body></html>

时间： 2024-08-05 15:22:17

js小效果-全选的相关文章

js实现CheckBox全选全不选

CheckBox全选全不选的js方法效果: 页面 :<table style="width: 2350px; table-layout: fixed;" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" class="data_table"> <tr class="scrollColThe

效果图: 代码: wxml <view class='hei_top'> <view class='hei_p'>共 <text>4</text> 场</view> <view class='hei_ps' bindtap='selectAll'> <image data-statue="selectilall" src="{{selectilall?'/images/[email protecte

js实现-小框框全选

点击全选下面单独的肉也会全选,再次点击取消一个一个点击肉,点完--全选也会被选上 HTML代码---CSS略 <table> <tr> <th> <input type="checkbox" id="checkAll" /> 全选/全不选 </th> <th>名字</th> <th>店铺</th> <th>价格</th> </t

avalon js实现checkbox全选

转载请注明: TheViper http://www.cnblogs.com/TheViper duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <h

js EasyUI前台全选的实现

在页面数据列表<d:table> </d:table> 加入代码 <d:col style="width:45" class="display_leftalign" title="选择<input type=\"checkbox\" id=\"checkAll\"/>"> <input type="checkbox" name=&

前端小demo——全选和全不选

模拟购物车,实现全选或者全不选,或者其中任意一件单品单选的效果. 点击顶部复选框实现全选列表中任意一项未选中,顶部复选框就是未选中的状态 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } #div {

JS实现购物车全选多选按钮功能

对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style> <body> <table>

js checkBox的全选，反选，与赋值

//js 数值是否在数组中 Array.prototype.in_array = function(e){ for(i=0;i<this.length;i++){ if(this[i] == e) return true; } return false; } //js数组index Array.prototype.find_str=function(string){ var str = this.join(""); return str.indexOf(string); } va

js 复制、全选功能

<%-- Created by IntelliJ IDEA. User: admin Date: 2015/10/23 Time: 16:24 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%