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,晚安!