廢話不多說,直接上代碼
<!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菜單實例(全選,反選,取消)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答