复选框的全选和反选

来源：互联网发布：深入浅出数据分析下载编辑：程序博客网时间：2024/05/16 12:18

当点击全选按钮时，所有复选框都被选中，

若有一个复选框没有被选中，则取消全选复选框的选中状态

1、一个订单表格的HTML代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/order.css" /><script type="text/javascript" src="js/order.js" ></script></head><body><table><tr><th><input type="checkbox" id="all" onclick="allSelect(this)"/>全选</th><th>商品名称</th><th>数量</th><th>价格</th><th>操作</th></tr><tr><th><input type="checkbox" name="cbo" onclick="Select()"/></th><td>哇哈哈矿泉水</td><td>10</td><td>2</td><td><input type="button" value="删除" /><input type="button" value="修改" /></td></tr><tr><th><input type="checkbox" name="cbo" onclick="Select()" /></th><td>农夫山泉矿泉水</td><td>10</td><td>2</td><td><input type="button" value="删除" /><input type="button" value="修改" /></td></tr><tr><th><input type="checkbox" name="cbo" onclick="Select()" /></th><td>冰露矿泉水</td><td>10</td><td>2</td><td><input type="button" value="删除" /><input type="button" value="修改" /></td></tr></table></body></html>

2、css样式代码

table {border-top: 1px solid #ccc;border-left: 1px solid #ccc;width: 400px;margin: 0 auto;}td,th {border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}

3、最重要的js代码

function allSelect(ch) {var item = document.getElementsByTagName("input"); //取所有的input标签for(var i = 0; i < item.length; i++) { //循环每一个if(item[i].type == "checkbox") { //判断是否是复选框item[i].checked = ch.checked; //复选框的选中与全选的复选框的选中相同}}}function Select() {var item = document.getElementsByName("cbo"); //把除全选以外的其他复选框取出来var all = document.getElementById("all"); //全选复选框var tag = true; //标记//循环每一个复选框，除全选for(var i = 0; i < item.length; i++) {if(item[i].checked == false) { // 判断是否选中tag = false;break;}}all.checked = tag; //设置全选框是否选中}

阅读全文

1 0