Jquery,全选,反选,
Posted tianranhui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery,全选,反选,相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="/vue/js/jquery-3.3.1.js" type="text/javascript"> </script> <script type="text/javascript"> $(function () { //所有复选选中让 全选的复选框选中 $("table tr td input[type=‘checkbox‘]").click(function(){ var check= $("table tr td input[type=‘checkbox‘]:checked").length; var all=$("table tr td input[type=‘checkbox‘]").length; if(check==all) { $("#all").prop("checked",true) } else { $("#all").prop("checked",false) } }) $("#all").click(function(){ var c= $("#all").prop("checked") if (c==true) { $("table tr td input[type=‘checkbox‘]").prop("checked",true) } else { $("table tr td input[type=‘checkbox‘]").prop("checked",false) } }) //反选按钮 $("#selectno").click(function(){ //获取所有未选中行的checkbox长度 var no= $("table tr td input[type=‘checkbox‘]:not(:checked)").length //获取所有选中行的checkbox长度 var yes= $("table tr td input[type=‘checkbox‘]:checked").length alert( ‘选中长度‘+yes) alert(‘未选中长度‘+no) $("table tr td input[type=‘checkbox‘]").each(function(){ $(this).prop("checked",!$(this).prop("checked")) }) }) }) </script> </head> <body> 全选:<input type="checkbox" id="all" > <input type="button" id="selectno" value="反选" > <table> <tr> <td>状态</td> <td>姓名</td> <td>工资</td> </tr> <tr> <td> <input type="checkbox" name="" value=""> </td> <td>张三</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" name="" value=""> </td> <td>李四</td> <td>200</td> </tr> <tr> <td> <input type="checkbox" name="" value=""> </td> <td>王五</td> <td>200</td> </tr> <tr> <td> <input type="checkbox" name="" value=""> </td> <td>赵六</td> <td>200</td> </tr> <tr> <td> <input type="checkbox" name="" value=""> </td> <td>田七</td> <td>200</td> </tr> <tr> <td> <input type="checkbox" name="" value=""> </td> <td>王八</td> <td>200</td> </tr> </table> </body> </html>
以上是关于Jquery,全选,反选,的主要内容,如果未能解决你的问题,请参考以下文章