javascript練習----復選框全選，全不選，反選 - xiaominwu－IT工程師數位筆記本

文章出處

第一種方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body{color: #000}
  </style>
<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {  創建20個Li 
  document.write("<li>");
  document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”這樣后端程序取得時候為數組。
  document.write("</li>");
  }
   document.write("</ul>");
   document.write('<a href="javascript:sall()">全選 </a>'); 此a被點擊的時候調用sall方法，此處是調用不是賦值所以要加上“()”。
   document.write('<a href="javascript:nall()">全不選 </a>');
   document.write('<a href="javascript:fall()">反選 </a>');
   var unames=document.getElementsByName("ids[]");
   function sall(){
    for(var i=0;i<unames.length;i++){
      unames[i].checked="true";
    }
   }
    function nall(){
        for(var i=0;i<unames.length;i++){
      unames[i].checked="";
    }
   }
    function fall(){
       for(var i=0;i<unames.length;i++){
        if(unames[i].checked){
           unames[i].checked="";
        }
        else{
           unames[i].checked="true";
        }
    }
   }
</script>
</head>
<body>
</body>
</html>

第二種方式：

<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {
  document.write("<li>");
  document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff');
  document.write("</li>");
  }
   document.write("</ul>");
   document.write('<label for="sall"><input type="checkbox" id="sall" onclick="sall(this)">全選</label>');this把當前的checkbox對象傳遞給函數內部方便調用該checkbox對象。
   var unames=document.getElementsByName("ids[]");
function sall(that){
  for (var i = 0; i <unames.length; i++) {
    unames[i].checked=that.checked;
  }
}
</script>

文章列表