Check – Uncheck tất cả input checkbox với JQuery
Có lẽ không ít thì nhiều các bạn những người đã và chuẩn bị là lập trình viên cảm thấy lóng ngóng và không biết phải bắt đầu từ đâu khi đối diện với chức năng này. Bản thân mình trước kia cũng vậy lóng ngóng như gà mắc tóc vậy, và code thì siêu cùi. Thì trong bài viết này mình sẽ hướng dẫn các bạn ...
Có lẽ không ít thì nhiều các bạn những người đã và chuẩn bị là lập trình viên cảm thấy lóng ngóng và không biết phải bắt đầu từ đâu khi đối diện với chức năng này. Bản thân mình trước kia cũng vậy lóng ngóng như gà mắc tóc vậy, và code thì siêu cùi. Thì trong bài viết này mình sẽ hướng dẫn các bạn làm chức năng này một cách đơn giản và dễ hiểu nhất.
- Checkbox check all sẽ có class = 'checkall'.
- Checkbox trong danh sách sẽ có class = 'checkitem'.
1. HTML.
<table class="table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th><input type="checkbox" class="checkall" value="0" /></th>
<th>Danh sách bài viết</th>
</tr>
</thead>
<tbody>
<tr>
<td awidth="3%"><input type="checkbox" class="chkitem" value="0" /></td>
<td>Backup và Restore cơ sở dữ liệu MySQL Dump bằng PHP</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="1" /></td>
<td>Nén danh mục và tự động tải xuống bằng Zip</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="2" /></td>
<td>10 Thư viện PHP mà bất kỳ ai cũng không thể bỏ qua</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="3" /></td>
<td>Vì sao nên chọn MySQL 5.7?</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="4" /></td>
<td>Call, Apply và Bind trong JavaScript</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="5" /></td>
<td>Tích hợp google reCAPTCHA vào website</td>
</tr>
</tbody>
</table>
Yêu cầu:
- Khi chúng ta check/uncheck checkall thì các checkbox ở danh sách sẽ checked và unchecked theo.
- Khi chúng ta bỏ một hoặc nhiều checked ở danh sách thì checkall sẽ bị bỏ check.
- Khi chúng ta checked tất cả các checkbox trong danh sách thì checkall sẽ được checked.
2. JQuery
2.1 Khi chúng ta check/uncheck checkall thì các checkbox ở danh sách sẽ checked và unchecked theo.
<script type="text/javascript">
$(function(){
/*Check & uncheck all*/
$(document).on('change', '.checkall', function(){
var $_this = $(this);
$('.chkitem').prop('checked', $_this.prop('checked'));
});
});
</script>
2.2 Yêu cầu số 2 & 3
Để giải quyết yêu cầu số 2 và số 3 thì mình sẽ bắt sự kiện khi người dùng click vào chkitem. Và mình sẽ loop(Lưu ý trong JQuery để loop thì chúng ta sẽ sử dụng hàm $.each() nhé) qua tất cả các checkbox để xem có checkbox nào không được checked không. Nếu không có thì sẽ gán checked cho checkall ngược lại sẽ bỏ checked của checkall.
$(document).on('change', '.chkitem', function(){
var $_this = $(this);
var $_checkedall = true;
$('.chkitem').each(function(){
if(!$(this).is(':checked')){
$_checkedall = false;
}
$('.checkall').prop('checked', $_checkedall);
});
});
Tổng hợp code JQuery.
<script type="text/javascript">
$(function(){
/*Check & uncheck all*/
$(document).on('change', '.checkall', function(){
var $_this = $(this);
$('.chkitem').prop('checked', $_this.prop('checked'));
});
/*Check list item*/
$(document).on('change', '.chkitem', function(){
var $_this = $(this);
var $_checkedall = true;
$('.chkitem').each(function(){
if(!$(this).is(':checked')){
$_checkedall = false;
}
$('.checkall').prop('checked', $_checkedall);
});
});
});
</script>
Hoàn tất. Nhưng theo mình code như này thì dài dòng quá mình sẽ rút gọn nó bằng cách nhóm cả 2 sự kiện click vào checkitem và checkall vào làm một và sử dụng hàm $.hasClass() để phân biệt được chúng ta đang check/uncheck checkbox nào trong danh sách.
<script type="text/javascript">
$(function(){
/*Check & uncheck all*/
$(document).on('change', '.checkall,.chkitem', function(){
var $_this = $(this);
if($_this.hasClass('checkall')){
$('.chkitem').prop('checked', $_this.prop('checked'));
}else{
var $_checkedall = true;
$('.chkitem').each(function(){
if(!$(this).is(':checked')){
$_checkedall = false;
}
$('.checkall').prop('checked', $_checkedall);
});
}
});
});
</script>
Có thể có nhiều cách khác nhau nhưng mình thường làm theo cách của mình như thế này. Và chúng ta sẽ tổng hợp nó với mã HTML code và chạy thử bằng cách lưu chúng thành một file .html bất kỳ.
<table class="table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th><input type="checkbox" class="checkall" value="0" /> Check/Uncheck</th>
<th>Danh sách bài viết</th>
</tr>
</thead>
<tbody>
<tr>
<td awidth="20%"><input type="checkbox" class="chkitem" value="0" /></td>
<td>Backup và Restore cơ sở dữ liệu MySQL Dump bằng PHP</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="1" /></td>
<td>Nén danh mục và tự động tải xuống bằng Zip</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="2" /></td>
<td>10 Thư viện PHP mà bất kỳ ai cũng không thể bỏ qua</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="3" /></td>
<td>Vì sao nên chọn MySQL 5.7?</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="4" /></td>
<td>Call, Apply và Bind trong JavaScript</td>
</tr>
<tr>
<td><input type="checkbox" class="chkitem" value="5" /></td>
<td>Tích hợp google reCAPTCHA vào website</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
/*Check & uncheck all*/
$(document).on('change', '.checkall,.chkitem', function(){
var $_this = $(this);
if($_this.hasClass('checkall')){
$('.chkitem').prop('checked', $_this.prop('checked'));
}else{
var $_checkedall = true;
$('.chkitem').each(function(){
if(!$(this).is(':checked')){
$_checkedall = false;
}
$('.checkall').prop('checked', $_checkedall);
});
}
});
});
</script>
3. Tổng kết.
Hy vọng với bài viết nhỏ này có thể giúp các bạn học & làm việc với JQuery sẽ tốt hơn. Thanks các bạn đã xem tuts.
