javascript+html+css简单的实现复选框的全选与单选

来源：互联网发布：qq邮箱smtp设置端口25 编辑：程序博客网时间：2024/05/20 06:27

<!DOCTYPE html><html><head>    <title>html+css+js简单实现复选框全选</title>    <meta http-equiv="content-type" content="text/html;charset=utf-8" />    <style type="text/css">    </style>    <script type="text/javascript">        function quanxuan()        {        <!--循环对各单选框的操作-->            for(var i=1;i<=3;i++)            {                var cbox_id="cadd"+i;            <!--document获取cbbox_id-->                var cbox=document.getElementById(cbox_id);                //alert(cbox.value);            <!--向单选框进行全选和非全选的if,ele判定-->                if(document.getElementById("check1").checked)                    cbox.checked=true;                else                    cbox.checked=false;            }        }    </script></head><body><form id="form1">    <table>        <tr><td><input type="checkbox" id="check1" onclick="quanxuan()" />全选</td>            <td>你喜欢吃哪种水果？</td><td>&nbsp;</td>            <td>&nbsp;</td>        </tr>        <tr>            <td><input type="checkbox" id="cadd1" value="1" />1</td>            <td>香蕉</td>            <td>&nbsp;</td>            <td>&nbsp;</td>        </tr>        <tr>            <td><input type="checkbox" id="cadd2" value="2" />2</td>            <td>苹果</td>            <td>&nbsp;</td>            <td>&nbsp;</td>        </tr>        <tr>            <td><input type="checkbox" id="cadd3" value="3" />3</td>            <td>梨子</td>            <td>&nbsp;</td>            <td>&nbsp;</td>        </tr>    </table></form></body></html>

阅读全文

0 0