zoukankan      html  css  js  c++  java
  • 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的参数。

    ###

  • 相关阅读:
    jquery插件-自定义select
    本地存储组件--兼容IE低版本
    jquery插件-省市联动
    nodejs学习笔记之包、模块实现
    nodejs学习笔记之安装、入门
    javascript的事件处理
    JS中简单的this学习
    你了解JS执行过程吗?
    halcon程序输出成c++程序
    poj3040
  • 原文地址:https://www.cnblogs.com/lwsup/p/7441693.html
Copyright © 2011-2022 走看看