CheckBox在表格中全选、部分选和反选

Yuyuquan

于 2016-10-06 17:05:02 发布

阅读量723

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_27918787/article/details/52744502

版权

这篇博客详细介绍了如何在表格中使用CheckBox实现全选、部分选择和反选（全不选）的功能，涵盖了相关操作的实现步骤和技巧。

摘要由CSDN通过智能技术生成

1、源码如下，TableCheckBox.html

TableCheckBox.html：

[html] view plain copy
⃕
print?

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>Table中的CheckBox</title>  
    <script type="text/javascript" src="script/jquery-1.10.1.js"></script>  
    <style type="text/css">  
       body  
       {  
         width:100%;  
         height:100%;  
         font-size:12px;  
       }  
       table  
       {  
         width:80%;  
         height:100%;  
       }  
       .tr_odd  
       {  
         background: #EBF2FE;  
       }  
       .tr_even  
       {  
         background: #B4CDE6;  
       }  
       .tab_body  
       {  
         text-align: center;  
       }  
    </style>  
    <script type="text/javascript">  
       $(function(){  
           $("tr:odd").addClass("tr_odd");//奇数行背景色  
           $("tr:even").addClass("tr_even");//偶数行背景色  
             
           $("#ckb_head").click(function(){  
               if($(this).prop("checked")){//全选  
                   $("input[name='ckb']").attr("checked","true");  
               }els

最低0.47元/天解锁文章

Yuyuquan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CheckBox在表格中全选、部分选和反选

1、源码如下，TableCheckBox.htmlTableCheckBox.html：[html] view plain copy⃕print? Table中的CheckBox body { width:100%;
复制链接

扫一扫

专栏目录