zoukankan      html  css  js  c++  java
  • python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js 

    jquery实现全选 反选 取消

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <input type="button" value="quanxuan" onclick="全选()"/>
    <input type="button" value="fanxuan" onclick="反选()"/>
    <input type="button" value="quxiao" onclick="取消()"/>
    
    <table>
        <thead>
        <tr>
            <th>选择</th>
            <th>ip</th>
            <th>端口</th>
        </tr>
    
        </thead>
        <tbody class="tb">
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.</td>
            <td>88</td>
    
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.</td>
            <td>88</td>
    
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.</td>
            <td>88</td>
    
        </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <!--第一种方法-->
    <script>
        function quanxuan() {
            $('input[type="checkbox"]').prop('checked', true)
        }
        function quxiao() {
            $('input[type="checkbox"]').prop('checked', false)
        }
        //    function fanxuan() {
        //        $('input[type="checkbox"]').each(function () {
        //            if(this.checked){
        //                this.checked=false
        //            }else {
        //                  this.checked=true
        //            }
        //
        //        })
    //    用jquery实现反选
    // checkbox  radio 选择一定要用prop
    //$().prop('checked') 获取值
    //$().prop('checked',true) 设置值
        function fanxuan() {
            $('input[type="checkbox"]').each(function () {
                if ($(this).prop("checked")) {
                    $(this).prop("checked", false)
                } else {
                    $(this).prop("checked", true)
                }
    
            })
    
        }
    
    </script>
    
    
    </body>
    </html>
  • 相关阅读:
    django配置日志
    drf6
    drf4
    drf3
    drf2
    drf1
    vue2
    vue3
    vue1
    choices字段、mtv和mvc模型、ajax基本语法、sweetalert弹出框插件、自定义分页器
  • 原文地址:https://www.cnblogs.com/xuehuahongmei/p/6123858.html
Copyright © 2011-2022 走看看