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

来源：好走旅游网

废话不多说，直接上代码

<!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菜单实例(全选,反选,取消)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务