JQuery implements check boxes to select all and unselect all and unselect and get selected values

  • 2020-03-30 03:18:31
  • OfStack

 
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
//Select/cancel all
$("#checkAllChange").click(function() { 
if (this.checked == true) { 
$(".userid").each(function() { 
this.checked = true; 
}); 
} else { 
$(".userid").each(function() { 
this.checked = false; 
}); 
} 
}); 
//  Future generations  
$("#checkAll").click(function() { 
$(".userid").each(function() { 
this.checked = true; 
}); 
}); 
//Cancel all
$("#removeAll").click(function() { 
$(".userid").each(function() { 
this.checked = false; 
}); 
}); 
//  The selected  
$("#reverse").click(function() { 
$(".userid").each(function() { 
if (this.checked == true) { 
this.checked = false; 
} else { 
this.checked = true; 
} 
}) 
}); 
//Batch delete
$("#delAll").click(function() { 
var arrUserid = new Array(); 
$(".userid").each(function(i) { 
if (this.checked == true) { 
arrUserid[i] = $(this).val(); 
} 
}); 
alert(" Batch deleted :" + arrUserid); 
}); 
}); 
</script> 
</head> 

<body> 
<table border="1"> 
<tr> 
<td><input type="checkbox" id="checkAllChange" /></td> 
<td> The user id</td> 
<td> The user name </td> 
<td> The phone </td> 
<td> address </td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="1" /></td> 
<td>1</td> 
<td>wangzs1</td> 
<td>18888000</td> 
<td> In the pudong new area </td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="2" /></td> 
<td>2</td> 
<td>wangzs2</td> 
<td>18888001</td> 
<td> Shanghai </td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="3" /></td> 
<td>3</td> 
<td>wangzs3</td> 
<td>18888002</td> 
<td> henan </td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="4" /></td> 
<td>4</td> 
<td>wangzs4</td> 
<td>18888003</td> 
<td> xuchang </td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" id="checkAll" value=" Future generations " /></td> 
<td><input type="button" id="removeAll" value=" Cancel all " /></td> 
<td><input type="button" id="reverse" value=" The selected " /></td> 
</tr> 
<tr> 
<td colspan="4" align="center"><input type="button" value=" Batch delete " id="delAll"></td> 
</tr> 
</table> 
</body> 

</html> 

Related articles: