一个清晰但不简洁的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便于相关操作。

转载于:https://www.cnblogs.com/ck235/p/4985500.html