为了账号安全,请及时绑定邮箱和手机立即绑定

在checkbox选中的状态下给父级span添加类sel

在checkbox选中的状态下给父级span添加类sel

qq__8222 2017-10-10 16:05:51
<!doctype html><html><head><meta charset="UTF-8"><title>拖拽</title><script src="js/jquery.min.js"></script><style type="text/css">form table{width:100%; text-align: center}form table th{ line-height: 50px; vertical-align: middle;}form table td{color: #000;font-size: 12px; line-height: 50px; vertical-align: middle;}form table thead td{color: #8d8d8d; }form table td span{width:18px; height:18px; border-radius: 4px; border:1px solid #d5d5d5;background-color: #fff;display: inline-block;box-sizing: border-box;vertical-align: middle;position:relative;}form table td span.sel{border:1px solid #2cb5ec;} form table td span.sel i{background-color: #2cb5ec; width:8px;height:8px; background-color: #2cb5ec;border-radius: 4px;display: inline-block;vertical-align: top;margin-top: 2px;}form table td span input[type="checkbox"]{width:20px;height:20px;position:absolute;opacity:0.5;top:-5px;left:-5px;}form table tbody td:nth-child(2){position: relative;}form table tbody td:nth-child(2) div{display:none; position: absolute;width:100px;height:100px; border:1px solid #e7e7e7;top:-30px; left:90px; box-shadow: 0 0 10px 0px rgba(209,211,210,0.5); background-color: #fff;}form table tbody td:nth-child(2) div img{width: 100px;}form table tbody td:nth-child(2):hover div{display: block;}form .list_table table tr:hover td{background-color:#e9f4ff; }form .list_table table thead tr:hover td{background-color:none; }.search table tr td input[type="text"]{width:140px;}</style><script type="text/javascript">$(function () {        $("table tr>td:first-child span").click(function(){             $(this).toggleClass("sel");        });           //全选或全不选            $("thead input").click(function(){                   if(this.checked){                       $("tbody :checkbox").prop("checked", true);                  }else{                       $("tbody  :checkbox").prop("checked", false);                }               });            //设置全选复选框            $("tbody  :checkbox").click(function(){                allchk();            });            function allchk(){                var chknum = $("tbody   :checkbox").size();//选项总个数                var chk = 0;                $("tbody   :checkbox").each(function () {                      if($(this).prop("checked")==true){                        chk++;                    }                });                if(chknum==chk){//全选                    $("thead input").prop("checked",true);                }else{//不全选                    $("thead input").prop("checked",false);                }            }             })</script></head><body><form>    <table>        <thead>            <tr>                <td><span><i></i><input type="checkbox" name="1" id="all"></td>                <td></td>                <td>允许收银</td>                <td>允许收银</td>            </tr>        </thead>        <tbody  id="list">            <tr>                <td><span><i></i><input type="checkbox" name="2"></span></td>                <td>允许收银</td>                <td>允许收银</td>                <td>允许收银</td>            </tr>             <tr>                <td><span><i></i><input type="checkbox" name="3"></span></td>                <td>允许收银</td>                <td>允许收银</td>                <td>允许收银</td>            </tr>            <tr>                <td><span><i></i><input type="checkbox" name="4"></span></td>                <td>允许收银</td>                <td>允许收银</td>                <td>允许收银</td>            </tr>             <tr>                <td><span><i></i><input type="checkbox" name="5"></span></td>                <td>允许收银</td>                <td>允许收银</td>                <td>允许收银</td>            </tr>        </tbody>      </table></form></body></html>
查看完整描述

2 回答

?
corner_sun

TA贡献4条经验 获得超0个赞

:checkbox换成[type=checkbox]

查看完整回答
反对 回复 2017-10-23
  • 2 回答
  • 0 关注
  • 1287 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信