2009-12-24传智播客——JavaScriptDOM加强 （二）（转载）

window.onload = function(){

    //为按钮添加事件处理代码，FORM中的button就是为javascript而生！

    // 全选

    var checkedAll = document.getElementById("CheckedAll");

    checkedAll.onclick = function(){

       funcheckedAll();

    }

    // 全不选

    var checkedNo = document.getElementById("CheckedNo");

    checkedNo.onclick = function(){

       funcheckedNo();

    }

    // 反选

    var checkedRev = document.getElementById("CheckedRev");

    checkedRev.onclick = function(){

       // 获取所有选择项

       var items = document.getElementsByName("items");

       for(var i=0; i<items.length;i++){

           // 判断是否为选中状态，然后设置为反向状态

           if(items[i].checked == true){

              items[i].checked = null;

           } else {

              items[i].checked = "checked";

           }

             

       }

    }

    // 提交，显示所有被选中的项目

    var checkedSubmit = document.getElementById("send");

    checkedSubmit.onclick = function(){

       // 获取所有选择项

       var items = document.getElementsByName("items");

       var itemssend = "";

       for(var i=0; i<items.length;i++){

           // 判断是否为选中状态，然后设置为反向状态

           if(items[i].checked == true){

              itemssend += items[i].value +"\r\n";            

           }            

       }

       // 如果有被选中的项目，则提示

       if(itemssend != "")

           alert(itemssend);

    }  

    // 全选/全不选 checkbox

    var checkedAll_2 = document.getElementById("checkedAll_2");

    checkedAll_2.onclick = function(){

       // 设置标签

       if(checkedAll_2.checked == true){

           funcheckedAll();

       } else {

           funcheckedNo();

       }

    }

    //设置每一项的onclick事件，它们将影响”全选/全不选“的状态。

    var items = document.getElementsByName("items");

    for(var i=0;i<items.length;i++){

       items[i].onclick = function(){

           // 取出所有项，判断他们的选中状态。

           var items = document.getElementsByName("items");

           var checkedAll = true;

           for(var i=0;i<items.length;i++){

              if(items[i].checked == false){

                  checkedAll = false;

                  break;

              }

           }

           // 如果全部选中，则设置”全选/全不选“为选中状态

           var checkedAll_2 = document.getElementById("checkedAll_2");

           if(checkedAll == true){

              checkedAll_2.checked = "checked";

           }else{

              checkedAll_2.checked = null;

           }

       }

    }

}

 

 

         Merry Christmas，晚安！