javascript--第12节-全选、取消全选、反选

来源：互联网发布：淘宝宝贝排名编辑：程序博客网时间：2024/06/05 12:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>全选、取消多选、反选</title>    <style type="text/css">        ul{            list-style-type: none;        }        a{            text-decoration: none;            color: #999999;            font-weight: bold;        }    </style></head><body><ul>    <li><input type="checkbox" name="ids[]" value="1">香蕉</li>    <li><input type="checkbox" name="ids[]" value="2">苹果</li>    <li><input type="checkbox" name="ids[]" value="3">西瓜</li>    <li><input type="checkbox" name="ids[]" value="4">梨</li>    <li><input type="checkbox" name="ids[]" value="5">草莓</li>    <li><input type="checkbox" name="ids[]" value="6">葡萄</li></ul><a href="javascript:selectAll();">全选</a>  <a href="javascript:selectNull();">取消全选</a>  <a href="javascript:selectRev();">反选</a><script>    var all=document.getElementsByTagName("input");    function selectAll(){        for(var n=0;n<all.length;n++){            all[n].checked="true";//全选为checked=1的时候为1或者true        }    }    function selectNull(){        for(var n=0;n<all.length;n++){            all[n].checked="";//取消全选的，checked为空        }    }    function selectRev(){        for(var n=0;n<all.length;n++){            if(all[n].checked){                all[n].checked="";            }else {                all[n].checked="true";            }        }    }</script></body></html>
0 0