前台js 2种 全选和不全选checkbox复选框

第一种：

<script type="text/javascript">
    // 全选按钮选中标志  
    var checkflag = "false";  
    // 全选功能  
    function selectAll(name){  
        var field = document.getElementsByName(name);  
        // 如果全选按钮状态是未选中  
        if (checkflag == "false"){  
            for (i = 0; i < field.length; i++){  
                field[i].checked = true;  
            }  
            // 更改全选按钮选中标志  
            checkflag = "true";  
        }else{  
            for (i = 0; i < field.length; i++){  
                field[i].checked = false;   
            }  
            // 更改全选按钮选中标志  
            checkflag = "false";  
        }  
    }
</script> 

 

html代码：

<form name="form" method="post" action="">

<input type="checkbox" value="全选" onClick="selectAll('list')">全选

<input type="checkbox" name="list" value="1" >1

<input type="checkbox" name="list" value="2" >2

<input type="checkbox" name="list" value="3" >3

<input type="checkbox" name="list" value="4" >4

</form>

 

第二种：

<script language ="javascript">
function CheckAll(form)  {
  for (var i=0;i<form.elements.length;i++) 
    {
    var e = form.elements[i];
    if (e.name != 'chkall')       e.checked = form.chkall.checked;
   }
  }
</script>

html代码：

<form id="form1" runat="server" name="form1">
  <input type="checkbox" name="chkall" onclick="CheckAll(this.form)" />全选
  <input type="checkbox" />1
    <input type="checkbox" />2
   <input type="checkbox" />3
     <input type="checkbox" />4
    <input type="checkbox" />5
  </form>