zoukankan      html  css  js  c++  java
  • jQuery全选、取消全选、反选

    <title></title>
    <style type="text/css">
    img
    {
    50px; height:50px;
    }
    table
    {
    600px; height:400px;
    }
    table tr td{ border:solid 1px #eee;}
    </style>

    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    $('#Checkbox7').click(function () {
    if ($('#Checkbox7:checked').val() == 'on') {
    // alert(1);
    $('input:not(#Checkbox7):not(#Checkbox8)').attr('checked', 'true');
    } else {
    $('input:not(#Checkbox7):not(#Checkbox8)').removeAttr('checked');
    }
    })

    $('#Checkbox8').click(function () {

    var ch = $('table input[type=checkbox]');
    ch.each(function () {
    $(this).attr('checked', !$(this).attr('checked'));
    })
    })

    })
    </script>

    </head>
    <body>
    <div>
    <input id="Checkbox7" type="checkbox" />全选<input id="Checkbox8" type="checkbox" />反选</div>
    <table>
    <tr>
    <td>
    操作
    </td>
    <td>
    编号
    </td>
    <td>
    名称
    </td>
    <td>
    作者
    </td>
    <td>
    封面
    </td>
    <td>
    单价
    </td>
    </tr>
    <tr>
    <td>
    <input id="Checkbox1" type="checkbox" />
    </td>
    <td>
    001
    </td>
    <td>
    三国演义
    </td>
    <td>
    罗贯中
    </td>
    <td>
    <img src="images/1.jpg" />
    </td>
    <td>
    45
    </td>
    </tr>
    <tr>
    <td>
    <input id="Checkbox2" type="checkbox" />
    </td>
    <td>
    002
    </td>
    <td>
    西游记
    </td>
    <td>
    吴承恩
    </td>
    <td>
    <img src="images/1.jpg" />
    </td>
    <td>
    40
    </td>
    </tr>
    <tr>
    <td>
    <input id="Checkbox3" type="checkbox" />
    </td>
    <td>
    003
    </td>
    <td>
    水浒传
    </td>
    <td>
    施耐庵
    </td>
    <td>
    <img src="images/1.jpg" />
    </td>
    <td>
    50
    </td>
    </tr>
    <tr>
    <td>
    <input id="Checkbox4" type="checkbox" />
    </td>
    <td>
    004
    </td>
    <td>
    红楼梦
    </td>
    <td>
    曹雪芹
    </td>
    <td>
    <img src="images/1.jpg" />
    </td>
    <td>
    100
    </td>
    </tr>
    <tr>
    <td>
    <input id="Checkbox5" type="checkbox" />
    </td>
    <td>
    005
    </td>
    <td>

    </td>
    <td>
    巴金
    </td>
    <td>
    <img src="images/1.jpg" />
    </td>
    <td>
    45
    </td>
    </tr>
    <tr>
    <td>
    <input id="Checkbox6" type="checkbox" />
    </td>
    <td>
    006
    </td>
    <td>
    茶馆
    </td>
    <td>
    老舍
    </td>
    <td>
    <img src="images/1.jpg" />
    </td>
    <td>
    35
    </td>
    </tr>
    </table>
    </body>
    </html>

  • 相关阅读:
    DBCP连接池使用
    odoo10学习笔记十七:controller
    odoo10学习笔记十六:定时任务
    odoo10学习笔记十五:仪表板
    odoo10学习笔记十三:qweb报表
    odoo10学习笔记十二:web controller
    odoo10学习笔记十一:视图综述
    odoo10学习笔记十:Actions
    odoo10学习笔记九:Odoo10 API
    odoo10学习笔记七:国际化、报表
  • 原文地址:https://www.cnblogs.com/qiqiBoKe/p/3036686.html
Copyright © 2011-2022 走看看