<!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，全选，反选，
猜你喜欢
转载自www.cnblogs.com/tianranhui/p/9813729.html
今日推荐
周排行