1.全选和不全选的案例 <style> * { padding: 0; margin: 0; }
.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; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>红烧肉</td> <td>我家小馆</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西红柿鸡蛋</td> <td>我家小馆</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>油炸榴莲</td> <td>我家小馆</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>清蒸龙虾</td> <td>我家小馆</td> </tr> </tbody> </table> </div> <script src="common.js"></script> <script>
var cheALl = my$("j_cbAll");
var che = my$("j_tb").getElementsByTagName("input"); // 全选 cheALl.onclick = function () { console.log(this.checked) for(var i= 0 ; i< che.length; i++){ che[i].checked = this.checked } }
//分别给每一个tbody中的input框注册点击事件 for(var i= 0 ; i < che.length; i++){ che[i].onclick = function () { //假设默认都被选中了 /*var flag = true; //循环的判断复选框是否被选中 for(var j = 0 ; j < che.length; j++){ //不被选中, 返回false, 取非 . 得true, 进入if循环 if(!che[j].checked){ flag = false; break;//跳出当前循环 } } cheALl.checked = flag;*/ for(var i=1;i<che.length;i++){ if(che[i].checked == false){ cheALl.checked = false; }else{ cheALl.checked = true; } } } } </script> 2.动态创建元素 <input type="button" id="btn" value="点击"> <div id="dv"> 今天你快乐吗 <a href="">哈哈</a> </div>
<script src="common.js"></script> <script> /* * 元素创建的三种方式 * 1. document.write("内容和标签") 页面上所存在的内容会被覆盖 * 2.对象.innerHTML = "内容和标签" 对象中的内容被覆盖 * 3.document.createELement("标签的名字") 创建完之后追加到父级元素 * 对象.appendChild(要添加的标签对象) 添加到父元素的末尾 * */ my$("btn").onclick = function () { //document.write("<h1>不要再问我快不快乐, 我很快乐</h1>") // my$("dv").innerHTML = "<h2>呵呵</h2>"; var h = document.createElement("h1"); my$("dv").appendChild(h); h.innerText = "哼哼"; h.style.color = "red";
} </script>
