DOM与JQ（全选与反选）

来源：互联网发布：淘宝女装店铺名称编辑：程序博客网时间：2024/06/08 19:45

全选和反选

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            patding: 0;            margin: 0;        }        .wrap {            width: 300px;            margin: 100px auto 0;        }        table {            border-collapse: collapse;            border-spacing: 0;            border: 1px solid #c0c0c0;            width: 300px;        }        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>    var all =document.getElementById("j_cbAll");    var tb =document.getElementById("j_tb");    var checkbox =tb.getElementsByTagName("input")    all.onclick =function () {        for (var i = 0; i < checkbox.length; i++) {            checkbox[i].checked = all.checked        }    };        for (var i = 0; i < checkbox.length; i++) {            checkbox[i].onclick = function () {                var isAllcheck = true                for (var i = 0; i < checkbox.length; i++) {                    if (checkbox[i].checked !== true) {                        isAllcheck = false    //判断如果没有选中，就其全选为false,跳出循环，直到全部被选中就等于全选框                        break;                    }                };                all.checked = isAllcheck            }        }</script></body></html>

以上是DOM操作全选和反选

JQ的全选和反选

 <script src="jquery-1.12.2.js" ></script>    <script>        $(function () {           $("#j_cbAll") .on("click",function () {               var eck=$(this).prop("checked")               $("#j_tb").find(":checkbox").prop("checked","eck")           });            $("#j_tb").find(":checkbox").on("click",function () {                var length1=$("#j_tb").find(":checkbox").length //获取所有复选框的个数                var length2=$("#j_tb").find(":checked").length  //获取所有被选中的个数                if(length1==length2) {     //判断是否被选中的个数是否等于当前所有选项框的个数                    $("#j_cbAll").prop("checked",true)                }                else  {                    $("#j_cbAll").prop("checked",false)                }            });        });    </script>

总结：js ; 先假设条件被选中，其判断里面所有是否被选中

JQ：判断是否被选中的个数是否等于当前所有选项框的个数，然后根据判断的结果执行全选的

JQ：获取本身元素固有的属性方法prop()

prop() :操作元素状态属性,参数1属性名,参数2属性值

添加自定义属性atttr()

$("#j_tb").find(":checkbox") :表示获取所有type为checkbox的input标签

$("#j_tb").find(":checked"): 表示获取tbody中所有checked状态为true的input标签

find()针对当前元素找里面的一些其他元素

阅读全文

0 0