首頁猿問如何為實現(xiàn)全選全不選

如何為實現(xiàn)全選全不選

Html5 JavaScript JQuery

qq__8222 2017-10-10 11:02:16

<!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:12px;height:12px; 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:1;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");??????? });??????? //全選或全不選??????? $("table thead> tr>td:first-child span>input").click(function(){? ???????????? if(this.checked){? ???????????????? $("table tbody>tr>td span>input:checkbox").prop("checked", true); ???????????? }else{? ???????????????? $("table tbody>tr>td span>input:checkbox").prop("checked", false);??????????? }? ???????? });??????? //設(shè)置全選復(fù)選框??????? $("table tbody>tr>td span>input :checkbox").click(function(){??????????? allchk();??????? });??????? function allchk(){??????????? var chknum = $("table tbody>tr>td span>input :checkbox").size();//選項總個數(shù)??????????? var chk = 0;??????????? $("table tbody>tr>td span>input :checkbox").each(function () { ???????????????? if($(this).prop("checked")==true){??????????????????? chk++;??????????????? }??????????? });??????????? if(chknum==chk){//全選??????????????? $("table thead> tr>td:first-child span>input").prop("checked",true);??????????? }else{//不全選??????????????? $("table thead>tr>td:first-child span>input").prop("checked",false);??????????? }};</script></head><body><form><div>??????? <div>??????????? <table cellspacing="0">??????????????? <thead>??????????????????? <tr>??????????????????????? <td><span><i></i><input type="checkbox"></span></td>??????????????????????? <td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????? ????????????????????? </tr>??????????????? </thead>??????????????? <tbody>???????????????????<tr>??????????????????????? <td><span><i></i><input type="checkbox"></span></td>??????????????????????? <td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????? ????????????????????? </tr>???????????????????<tr>??????????????????????? <td><span><i></i><input type="checkbox"></span></td>??????????????????????? <td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????? ????????????????????? </tr>????????????????????<tr>??????????????????????? <td><span><i></i><input type="checkbox"></span></td>??????????????????????? <td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????????????????<td>商品名稱</td>??????????????????????? <td>店鋪名稱</td>????????????? ????????????????????? </tr>??????????????? </tbody>??????????? </table>??????????? </div>??????? </div></form></body></html>

查看完整描述

1 回答

qq__8222

TA貢獻1條經(jīng)驗獲得超0個贊

<!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:1;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);
??????????????? }? ?
??????????? });
??????????? //設(shè)置全選復(fù)選框
??????????? $("tbody? :checkbox").click(function(){
??????????????? allchk();
??????????? });
??????????? function allchk(){
??????????????? var chknum = $("tbody?? :checkbox").size();//選項總個數(shù)
??????????????? 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>