一个清晰但不简洁的HTML 复选框全选方案

这个方案牛逼的地方在于取消任意一个选项  全选按钮也会自动取消选定

<form id="form1" runat="server">
    <div>
<input type="checkbox" name="checkC" onclick="resAll()"/>1
<input type="checkbox" name="checkC" onclick="resAll()"/>2
<input type="checkbox" name="checkC" onclick="resAll()"/>3
<input type="checkbox" name="checkC" onclick="resAll()"/>4
<input type="checkbox" name="checkC" onclick="resAll()"/>5
<input type="checkbox" name="checkC" onclick="resAll()"/>6
<input type="checkbox" name="checkC" onclick="resAll()"/>7
<input type="checkbox" name="all" id="all" onclick="checkAll()"/>全选
<script type="text/javascript" >
function checkAll(){
    var d = document,
    items=d.getElementsByName("checkC"),
    itemall = d.getElementById("all"),
    len = items.length;
    for(var i=0;i<len;i++){
        items[i].checked=itemall.checked;
    }
}
function resAll(){
    var d = document,
    items=d.getElementsByName("checkC"),
    itemall = d.getElementById("all"),
    ite=0;
    for(var i=0;i<items.length;i++){
        if(items[i].checked){
         ite++;
        }
    }
    if(ite==items.length-1&&itemall.checked){
        itemall.checked=false;
    }
    if(ite==items.length&&!itemall.checked){
        itemall.checked=true;
    }
}
</script>
        </div>
    </form>

另附:

html的name和id可以类比身份证的姓名和身份证编号编号id具有唯一性,一个id只出现一次。名称name具备可重复性,可以多次出现。在css中两者都具备识别html元素的作用,name用点号.表示,id用井号#一般name用于通用多次出现元素的样式定义,id用于唯一性元素样式定义。

在表单当中,由于有些控件具备多元素特性,例如radio checkbox等,使用id不便于表单数据的提交,此外浏览器会根据name来设定发送到服务器的request,因此在表单当中,用name来提交数据。

当然,在实际的html中,也完全可以不用id,用单独的class也可以起到代替id的作用。但是在js中,是无法通过class直接后去html元素的, 定义id便于相关操作。
时间: 2024-10-23 19:00:20

一个清晰但不简洁的HTML 复选框全选方案的相关文章

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

checkbox复选框全选批量删除

多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]"

checkbox全选/全不选,子复选框全选父复选框选中

<input type="checkbox" class="optionListAll">/* 父复选框 */ <input type="checkbox" name="optionList"> <input type="checkbox" name="optionList"> <input type="checkbox" n

复选框全选/全部选

复选框全选/全部选 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function() { /* 全选按钮点击按钮以后,四个多选框全部被选中 */ // 为idcheckedAllBtn的按钮绑

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

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

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

jQuery实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa