天天看點

用JavaScript實作複選框的全選/全不選效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 function check(){
   var oInput=document.getElementsByName("product");
   for(var i=0;i<oInput.length;i++){
     oInput[i].checked=document.getElementById("all").checked;
   }
   
 }
 
 
 
 
</script>
</head>
<body>
<table border="0" cellspacing="0" class="bg">
        <td><input id="all" type="checkbox" value="全選" onclick="check()"/>全選</td>
         <td>商品圖檔</td>
         <td>商品名稱</td>
         <td>商品價格</td>
         <tr>
         <td><input name="product" type ="checkbox" value="1"/></td>
         <tr>
         <td><input name="product" type ="checkbox" value="2"/></td>
         <tr>
         <td><input name="product" type ="checkbox" value="3"/></td>
         <tr>
         <td><input name="product" type ="checkbox" value="4"/></td>
</table>
</body>
</html>      

繼續閱讀