全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能。
下面我只就用一个简单的案例做个演示吧。
商品价格
小米手机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;
};
}
上面就是这个案例的效果了。
当然,这个还可以扩展一下,做成一个购物车的案例。