Sử dụng jQuery để tạo check all và uncheck all
Trong tut này chúng ta nghiên cứu cách tạo Check all và Uncheck all bằng cách dùng jQuery.
Nếu bạn chưa biết 2 cái này là gì thì mình xin giải thích, Check all là cùng một lúc chọn nhiều phần tử check box, còn Uncheck all là cùng một lúc hủy chọn nhiều phần tử check box. Đôi khi lướt web, một số trang web đưa ra một danh sách checkbox để bạn tùy chọn, nếu bạn muốn chọn tất cả các checkbox thì phải check từng cái một. Đặc biệt khi bạn làm việc trong trang admin panel, hoặc khi bạn làm việc với CSDL trong phpmyadmin chẳng hạn, nếu bạn muốn chọn tất cả phần tử của một bảng thì lại phải check để chọn từng cái một, rất mất thời gian. Đối với việc phải hủy check từng cái một từ một bảng đã check tất cả cũng tương tự như vậy. Chính vì vậy trong phpmyadmin, bạn có thể nhấp vào chữ Check all hoặc Uncheck all cuối mỗi bảng để chọn hoặc hủy chọn toàn bộ, nó sẽ giúp tiết kiệm rất nhiều thời gian.
Do đó, chúng ta sẽ nghiên cứu cách tạo ứng dụng này bằng jQuery.
Trước hết, bảng checkbox của chúng ta sẽ gồm 3 trạng thái background. Khi bình thường thì nó có một màu, khi hover qua thì nó có một màu, còn khi đã được check thì nó lại có một màu khác để cho người dùng biết là nó đã được chọn. Dưới đó có 2 đường link là check all để chọn tất cả và uncheck all để hủy chọn tất cả.
Bước 1 : HTML
Mở đầu code HTML, trong thẻ head mình đã liên kết tới thư viện jQuery phiên bản 1.8.3, và liên kết thêm tới file js.js (bạn cần tạo ra file này) chứa code jQuery của mình trong đó:
Mình cần một thẻ ul để làm danh sách check box, trong mỗi li mình gồm 1 thẻ input (bao quanh bằng 1 thẻ div) và một thẻ p. Cuối cùng nằm dưới thẻ ul mình gồm 2 thẻ a làm check và uncheck all. Trong div#wrapper, mình viết:
Bước 2 : CSS
Về code CSS, mình xin lược bỏ qua phần này vì phần style khá đơn giản, chỉ gồm một vài định dạng cơ bản:
Mình chỉ lưu ý trong phần này, trong li, mình có định dạng background cho li.checked, trong code HTML không có class này nhưng mình sẽ thêm nó bằng jQuery.
Bước 3: JQUERY
Bạn tạo một file js.js (mình đã nói ở trên), mình sẽ code jQuery trong file này.
Đầu tiên, chắc ai cũng biết rồi, phải bắt đầu bằng:
Việc đầu tiên là làm một function để khi người dùng check một input thì cả cái li sẽ được thêm class là checked, và làm cho li đổi màu:
Trong bộ chọn của function trên, mình chỉ chọn input loại checkbox. Khi thực hiện tác vụ click, đối tượng $(this) ở đây đang trỏ tới phần tử input vừa được click, vì nó được sử dụng nhiều lần nên mình tạo một biến $this để lưu đối tượng $(this).
Tiếp theo, trong bộ chọn $this.parent(‘div’).parent(‘li’), trong function parent(‘div’) nhằm chọn phần tử div là cha của $this (input được chọn), bây giờ mình đang trỏ tới thẻ div đó. Dùng tiếp function parent(‘li’) nhằm chọn phần tử li là cha của $this.parent(‘div’) (tức phần tử cha của thẻ div).
Kết quả cuối cùng của bộ chọn này là mình trỏ tới thẻ li là “ông nội” của thẻ input được click. Mình lưu đối tượng này vào biến $li.
Sau đó, mình dùng mệnh đề if để kiểm tra sau khi click thì input có được check hay không. Với điều kiện $this.attr(‘checked’) == ‘checked’ đúng, tức input được check, thì mình sẽ thêm class checked vào $li, ngược lại mình sẽ bỏ class checked nếu điều kiện sai.
Function thứ 2, chúng ta tạo check all và uncheck all:
Thuộc tính $(this).text() sẽ cho kết quả là text của thẻ a được click, mình lưu vào biến text.
Nếu điều kiện đúng, tức thẻ a check all được click, mình sẽ cho tất cả input có thuộc tính checked là true (tức được check), và thêm class checked vào tất cả thẻ li.
Ngược lại, thẻ a uncheck all được click thì cho input có checked là false (bị bỏ check), bỏ hết class checked trong tất cả thẻ li.
Đến đây thì bạn đã có được check all và uncheck all rồi. Tuy nhiên khi bạn check input, rồi load lại trang thì input vừa được check bị mất class checked.
Do đó phải viết thêm một function nữa để kiểm tra sau khi vừa load, có input nào được check thì thêm class cho input đó. Function như sau:
Bộ chọn là li, hàm each sẽ chạy cái function này qua từng thẻ li.
Lưu đối tượng $(this) vào biến $this.
Với bộ chọn $this.children(‘div’).children(‘input:checkbox’), children(‘div’) trỏ tới thẻ div là con của li, children(‘input:checkbox’) trỏ tiếp tới con của div là input, lưu bộ chọn này vào biến $input.
Sau đó kiểm tra nếu điều kiện $input.attr(‘checked’) == ‘checked’ đúng thì sẽ thêm class vào $this (tức thẻ li).
Cuối cùng là xem kết quả:
Đến đây ta được một check all và uncheck all hoàn chỉnh. Tuy nhiên là mình sử dụng jQuery, nên nếu máy người dùng không bật javascript thì cũng đành phải bó tay vậy!!!
Chúc các bạn thành công.
Trong tut này chúng ta nghiên cứu cách tạo Check all và Uncheck all bằng cách dùng jQuery.
Nếu bạn chưa biết 2 cái này là gì thì mình xin giải thích, Check all là cùng một lúc chọn nhiều phần tử check box, còn Uncheck all là cùng một lúc hủy chọn nhiều phần tử check box. Đôi khi lướt web, một số trang web đưa ra một danh sách checkbox để bạn tùy chọn, nếu bạn muốn chọn tất cả các checkbox thì phải check từng cái một. Đặc biệt khi bạn làm việc trong trang admin panel, hoặc khi bạn làm việc với CSDL trong phpmyadmin chẳng hạn, nếu bạn muốn chọn tất cả phần tử của một bảng thì lại phải check để chọn từng cái một, rất mất thời gian. Đối với việc phải hủy check từng cái một từ một bảng đã check tất cả cũng tương tự như vậy. Chính vì vậy trong phpmyadmin, bạn có thể nhấp vào chữ Check all hoặc Uncheck all cuối mỗi bảng để chọn hoặc hủy chọn toàn bộ, nó sẽ giúp tiết kiệm rất nhiều thời gian.
Do đó, chúng ta sẽ nghiên cứu cách tạo ứng dụng này bằng jQuery.
Trước hết, bảng checkbox của chúng ta sẽ gồm 3 trạng thái background. Khi bình thường thì nó có một màu, khi hover qua thì nó có một màu, còn khi đã được check thì nó lại có một màu khác để cho người dùng biết là nó đã được chọn. Dưới đó có 2 đường link là check all để chọn tất cả và uncheck all để hủy chọn tất cả.
Bước 1 : HTML
Mở đầu code HTML, trong thẻ head mình đã liên kết tới thư viện jQuery phiên bản 1.8.3, và liên kết thêm tới file js.js (bạn cần tạo ra file này) chứa code jQuery của mình trong đó:
Mã:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Check all and uncheck all</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrapper">
</div><!--end #wrapper-->
</body>
</html>Mình cần một thẻ ul để làm danh sách check box, trong mỗi li mình gồm 1 thẻ input (bao quanh bằng 1 thẻ div) và một thẻ p. Cuối cùng nằm dưới thẻ ul mình gồm 2 thẻ a làm check và uncheck all. Trong div#wrapper, mình viết:
Mã:
<ul>
<li>
<div><input type="checkbox" /></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Excepteur sint occaecat cupidatat
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Dolore eu fugiat nulla pariatur
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Consectetur adipisicing elit, sed do eiusmod
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
</li>
<li>
<div><input type="checkbox" /></div>
<p>
Consectetur adipisicing elit, sed do eiusmod
</p>
</li>
</ul>
<a href="#">Check all</a>
<a href="#">Uncheck all</a>Bước 2 : CSS
Về code CSS, mình xin lược bỏ qua phần này vì phần style khá đơn giản, chỉ gồm một vài định dạng cơ bản:
Mã:
* {margin: 0; padding: 0;}
#wrapper {
width: 500px;
margin: 50px auto;
}
ul {
list-style: none;
margin-bottom: 50px;
}
ul li {
border: 1px solid #a5a5a5;
overflow: hidden;
height: 40px;
line-height: 40px;
background: #adbddf;
}
ul li:hover {
background: #4bdc68;
}
ul li.checked {
background: #ec506f;
}
ul li div {
float: left;
padding: 0px 15px;
border-right: 1px solid #a5a5a5;
}
ul li p {
float: left;
margin-left: 20px;
}Mình chỉ lưu ý trong phần này, trong li, mình có định dạng background cho li.checked, trong code HTML không có class này nhưng mình sẽ thêm nó bằng jQuery.
Bước 3: JQUERY
Bạn tạo một file js.js (mình đã nói ở trên), mình sẽ code jQuery trong file này.
Đầu tiên, chắc ai cũng biết rồi, phải bắt đầu bằng:
Mã:
$(document).ready(function(){
});Việc đầu tiên là làm một function để khi người dùng check một input thì cả cái li sẽ được thêm class là checked, và làm cho li đổi màu:
Mã:
$('input:checkbox').click(function(){
$this = $(this);
$li = $(this).parent('div').parent('li');
if($this.attr('checked') == 'checked'){
$li.addClass('checked');
} else {
$li.removeClass('checked');
};
});Trong bộ chọn của function trên, mình chỉ chọn input loại checkbox. Khi thực hiện tác vụ click, đối tượng $(this) ở đây đang trỏ tới phần tử input vừa được click, vì nó được sử dụng nhiều lần nên mình tạo một biến $this để lưu đối tượng $(this).
Tiếp theo, trong bộ chọn $this.parent(‘div’).parent(‘li’), trong function parent(‘div’) nhằm chọn phần tử div là cha của $this (input được chọn), bây giờ mình đang trỏ tới thẻ div đó. Dùng tiếp function parent(‘li’) nhằm chọn phần tử li là cha của $this.parent(‘div’) (tức phần tử cha của thẻ div).
Kết quả cuối cùng của bộ chọn này là mình trỏ tới thẻ li là “ông nội” của thẻ input được click. Mình lưu đối tượng này vào biến $li.
Sau đó, mình dùng mệnh đề if để kiểm tra sau khi click thì input có được check hay không. Với điều kiện $this.attr(‘checked’) == ‘checked’ đúng, tức input được check, thì mình sẽ thêm class checked vào $li, ngược lại mình sẽ bỏ class checked nếu điều kiện sai.
Function thứ 2, chúng ta tạo check all và uncheck all:
Mã:
$('a').click(function(){
var text = $(this).text();
if(text == 'Check all'){
$('input:checkbox').attr('checked',true);
$('li').addClass('checked');
} else {
$('input:checkbox').attr('checked',false);
$('li').removeClass('checked');
};
return false;
});Thuộc tính $(this).text() sẽ cho kết quả là text của thẻ a được click, mình lưu vào biến text.
Nếu điều kiện đúng, tức thẻ a check all được click, mình sẽ cho tất cả input có thuộc tính checked là true (tức được check), và thêm class checked vào tất cả thẻ li.
Ngược lại, thẻ a uncheck all được click thì cho input có checked là false (bị bỏ check), bỏ hết class checked trong tất cả thẻ li.
Đến đây thì bạn đã có được check all và uncheck all rồi. Tuy nhiên khi bạn check input, rồi load lại trang thì input vừa được check bị mất class checked.
Do đó phải viết thêm một function nữa để kiểm tra sau khi vừa load, có input nào được check thì thêm class cho input đó. Function như sau:
Mã:
$('ul li').each(function(){
$this = $(this);
$input = $this.children('div').children('input:checkbox');
if($input.attr('checked') == 'checked'){
$this.addClass('checked');
};
});Bộ chọn là li, hàm each sẽ chạy cái function này qua từng thẻ li.
Lưu đối tượng $(this) vào biến $this.
Với bộ chọn $this.children(‘div’).children(‘input:checkbox’), children(‘div’) trỏ tới thẻ div là con của li, children(‘input:checkbox’) trỏ tiếp tới con của div là input, lưu bộ chọn này vào biến $input.
Sau đó kiểm tra nếu điều kiện $input.attr(‘checked’) == ‘checked’ đúng thì sẽ thêm class vào $this (tức thẻ li).
Cuối cùng là xem kết quả:
Đến đây ta được một check all và uncheck all hoàn chỉnh. Tuy nhiên là mình sử dụng jQuery, nên nếu máy người dùng không bật javascript thì cũng đành phải bó tay vậy!!!
Chúc các bạn thành công.
Nguồn: izwebz.com
Bài viết liên quan
Bài viết mới
