html中的javascript 全選/取消全選操作示例代碼

字號(hào):


    代碼如下:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>無(wú)標(biāo)題文檔</title>
    <script type="text/javascript" language="javascript">
    function selectAllDels()
    {
    var allCheckBoxs = document.getElementsByName("preDelCheck");
    var desc = document.getElementById("allChecked");
    var selectOrUnselect=false;
    for(var i = 0; i < allCheckBoxs.length; i ++ )
    {
    if(allCheckBoxs[i].checked){
    selectOrUnselect=true;
    break;
    }
    }
    if (selectOrUnselect)
    {
    _allUnchecked(allCheckBoxs);
    }else
    {
    _allchecked(allCheckBoxs);
    }
    }
    function _allchecked(allCheckBoxs){
    for(var i = 0; i < allCheckBoxs.length; i ++ )
    {
    allCheckBoxs[i].checked = true;
    }
    }
    function _allUnchecked(allCheckBoxs){
    for(var i = 0; i < allCheckBoxs.length; i ++ )
    {
    allCheckBoxs[i].checked = false;
    }
    }
    </script>
    </head>
    <body>
    <p>test</p>
    <form>
    <input type="checkbox" name="preDelCheck" value="cream">ID1
    <input type="checkbox" name="preDelCheck" value="sugar" >ID2
    <input type="checkbox" name="preDelCheck" value="sugar">ID3
    <input type="checkbox" name="preDelCheck" value="sugar">ID4
    <input type="checkbox" name="preDelCheck" value="sugar">ID5
    <input type="button" id="allChecked" value="全選/取消全選" onClick="selectAllDels()">
    </form>
    </body>
    </html>