html dom反选,DOM操作案例之--全选与反选(示例代码)

全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。

下面我只就用一个简单的案例做个演示吧。

商品价格

小米手机2000ThinkPad5000iPhone75000iPhoneX9000

上面是是HTML部分代码，做了一个表格。

下面是css代码：

}.wrap{width:300px;margin:100px auto 0;

}table{border-collapse:collapse;border-spacing:0;border:1px solid #c0c0c0;width:300px;

}th,

td{border:1px solid #d0d0d0;color:#404060;padding:10px;

}th{background-color:#09c;font:bold 16px "微软雅黑";color:#fff;

}td{font:14px "微软雅黑";

}tbody tr{background-color:#f0f0f0;

}tbody tr:hover{cursor:pointer;background-color:#fafafa;

}

下面是js代码，实现全选反选功能。

var all = document.getElementById("j_cbAll");

var tbody = document.getElementById("j_tb");

var checkboxes = tbody.getElementsByTagName("input");//下面的单选框

//点击all 让下面的的选中状态和all一致

all.onclick = function () {

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

checkboxes[i].checked = all.checked;

}

};

//让下面的影响上面

//点击每一个都判断 如果每一个都选中了 all就选中 否则不选中

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

checkboxes[i].onclick = function () {

var isCheckedAll = true;

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

if (!checkboxes[i].checked) {

isCheckedAll = false;

break;

}

}

all.checked = isCheckedAll;

};

}

上面就是这个案例的效果了。

当然，这个还可以扩展一下，做成一个购物车的案例。