jquery 实现页面全选反选功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkALL();" />
<input type="button" value="取消" onclick="cancleALL();" />
<input type="button" value="反选" onclick="reverAll();" />
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="i1">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2.2.2.2</td>
<td>2222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3.3.3.3</td>
<td>3333</td>
</tr>
<tr></tr>
</tbody>
</table>

<script src="jquery-1.12.4.js"></script>
<script>
    function checkALL() {
        $('#i1 :checkbox').prop('checked',true);
    }
    function cancleALL() {
        $('#i1 :checkbox').prop('checked',false)
    }
    function reverAll() {
           $('#i1 :checkbox').each(function (k) {
            console.log(k)
            if($(this).prop('checked')){
                $(this).prop('checked',false);

            }else {
                $(this).prop('checked',true);
            }

// if(this.checked) {
// this.checked = false;
// }else {
// this.checked = true;
// }

        })
    }

</script>

</body>
</html>

猜你喜欢

转载自blog.51cto.com/1662659/2125487