Html表の全選択に対応するjavascript
13507 ワード
1 <script type="text/javascript">
2 //
3 $("table th input:checkbox").on(
4 "click",
5 function() {
6 var that = this;
7 $(this).closest("table").find("tr > td:first-child input:checkbox").each(function() {
8 this.checked = that.checked;
9 if(this.checked){
10 $(this).parents("tr").addClass("success");//success
11 }else{
12 $(this).parents("tr").removeClass("success");
13 }
14 });
15
16 });
17 //
18 var checkLine = function(e) {
19 $(e).find("td:first-child input").each(function(){
20 this.checked=!this.checked;
21 if(this.checked){
22 $(e).addClass("success");
23 }else{
24 $(e).removeClass("success");
25 }
26 });
27 fullCkOrNot();
28 }
29 //checkbox
30 $("table tr td input:checkbox").on("click",function(){
31 this.checked=!this.checked;
32 fullCkOrNot();
33 });
34 // checkbox checkbox
35 var fullCkOrNot=function(){
36 var allCB=$("table th input:checkbox").get(0);
37 if($("table tr td input:checkbox:checked").length==$("table tr td input:checkbox").length){
38 allCB.checked=true;
39 }else{
40 allCB.checked=false;
41 }
42 };
43 </script> 1 <table id="dataTable"
2 class="table table-striped table-bordered table-hover">
3 <thead>
4 <tr>
5 <th class="center"><label> <input type="checkbox"
6 class="ace" /><span class="lbl"></span>
7 </label>
8 </th>
9 <th> </th>
10 <th> </th>
11 </tr>
12 </thead>
13
14 <tbody>
15 <c:forEach var="role" items="${roleList }">
16 <tr onclick="checkLine(this);">
17 <td class="center"><label><input type="checkbox"
18 class="ace" name="checks" value="${user.id }"/> <span
19 class="lbl"></span> </label></td>
20 <td>${user.name }</td>
21 <td>${user.rights }</td>
22 </tr>
23 </c:forEach>
24 </tbody>
25 </table>