JavaScript

超轻量级php框架startmvc

jQuery菜单实例(全选,反选,取消)

更新时间:2020-06-01 11:18:01 作者:startmvc
废话不多说,直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><tit

废话不多说,直接上代码


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <input type="button" value="全选" onclick="checkAll()">
 <input type="button" value="反选" onclick="reverseAll()">
 <input type="button" value="取消" onclick="cancleAll()">
 <table border="1">
 <thead>
 <tr>
 <th>选择</th>
 <th>IP</th>
 <th>端口</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><input type="checkbox"></td>
 <td>1.1.1.1</td>
 <td>80</td>
 </tr>
 <tr>
 <td><input type="checkbox"></td>
 <td>1.1.1.1</td>
 <td>80</td>
 </tr>
 <tr>
 <td><input type="checkbox"></td>
 <td>1.1.1.1</td>
 <td>80</td>
 </tr>
 <tr>
 <td><input type="checkbox"></td>
 <td>1.1.1.1</td>
 <td>80</td>
 </tr>
 <tr>
 <td><input type="checkbox"></td>
 <td>1.1.1.1</td>
 <td>80</td>
 </tr>
 </tbody>

 </table>
 <script type="text/javascript" src='jquery-3.2.1.js'></script>
 <script type="text/javascript">
 function checkAll(){
 $(':checkbox').prop('checked',true);
 }
 function cancleAll() {
 $(':checkbox').prop('checked',false);
 }
 function reverseAll(){
 $(':checkbox').each(function(){
 var v = $(this).prop('checked')? false:true; /*三元运算: var v = 条件? 真值:假值*/
 $(this).prop('checked',v)
 })
 }
 </script>
</body>
</html>

以上这篇jQuery菜单实例(全选,反选,取消)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

jquery全选反选