复选框的全选和反选

来源：互联网发布：stm32能跑linux吗编辑：程序博客网时间：2024/06/01 09:48

复选框的全选和反选示例效果

示例图片

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script>            window.onload=function(){            var sel= document.getElementById("sel");            var hobbys= document.getElementsByName("hobby");            var fx=document.getElementById("fx");                //全选                sel.onclick=function(){                    if(sel.checked==true){                        for(var i=0;i<hobbys.length;i++){                            hobbys[i].checked=true;                        }                    }else{                        for(var i=0;i<hobbys.length;i++){                            hobbys[i].checked=false;                        }                    }                }                //反选                fx.onclick=function(){                    for(var i=0;i<hobbys.length;i++){                        if(hobbys[i].checked==true){                            fx.checked=false;                        }else{                            fx.checked=true;                        }                    }                }            }        </script>    </head>    <body>        <p>        <input type="checkbox" id="sel" />全选        <input type="checkbox" id="fx"/>反选        </p>        <p>            <input type="checkbox" name="hobby" />音乐            <input type="checkbox" name="hobby" />书法            <input type="checkbox" name="hobby" />绘画        </p>    </body></html>

阅读全文

0 0