HTML# jQuery 全选/反选/取消按钮

###

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button"  value="全选" onclick="selectAll()">
    <input type="button"  value="反选" onclick="reverse()">
    <input type="button"  value="取消" onclick="cancelAll()">
    <table border="1px">
        <tr>
            <th>选项</th>
            <th>IP</th>
            <th>端口</th>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>8080</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.2</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.3</td>
            <td>3306</td>
        </tr>
    </table>

    <script src="jquery-3.2.1.js"></script>
    <script>
            function selectAll() {
                $(':checkbox').prop('checked',true);
            }
            function cancelAll() {
                $(':checkbox').prop('checked',false);
            }
            function reverse() {
$(':checkbox').each(function () { $(this).prop('checked')?$(this).prop('checked',false):$(this).prop('checked',true); }) } </script> </body> </html>
$(this).prop('checked')  当没有传入bool值的时候,这句话的意思是判断当前的checkbox是否为true
$(this).prop('checked',false)  当传入false/true的时候,是修改checkbox的参数。

###

原文地址:https://www.cnblogs.com/lwsup/p/7441693.html