Xem bài viết Chọn tất cả các checkbox bằng jQuery và Javascript

Chọn tất cả các checkbox bằng jQuery và Javascript

Aug 14, 2012Jquery / Javascript
Bài viết này mình sẽ giới thiệu đến các bạn 2 cách để chọn tất cả các checkbox, 1 là dùng jQuery , 2 là dùng Javascript. Giờ mình cùng bắt đầu nào.

1. Check/Uncheck DÙNG JQUERY

Phần này chúng ta sẽ check/uncheck dùng jQuery nhe.

1.1 Thêm thư viện cần thiết

Trước tiên bạn cần download thư viện jQuery về máy trước khi thực hiện việc viết code nhé.
	<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
	

1.2 Nội dung HTML

Phần html của mình là 1 table, mình định dạng như sau:

Chọn tất cả các checkbox bằng jQuery và Javascript - 2Cwebvn
Trở về trang chủ 2Cwebvn

PHP & MySQL
TÌM KIẾM DỮ LIỆU VỚI PHP KẾT HỢP AJAX JQUERY
9 SYNTAX HIGHLIGHTING LÀM ĐẸP CODE TRONG BÀI VIẾT
CƠ BẢN VỀ FORM TRONG PHP
CÁCH TẠO FILE ZIP VỚI PHP
TẠO FORM LOGIN HOÀN CHỈNH BẰNG KỸ THUẬT AJAX VÀ VALIDATE JQUERY
JQUERY & JAVASCRIPT
DÙNG MOOTOOLS TẠO THƯ VIỆN TRƯNG BÀY ẢNH VỚI HIỆU ỨNG ĐẸP MẮT
JQUERY VALIDATE - PLUGIN KIỂM TRA DỮ LIỆU NHẬP TRÊN FORM
BACK TO TOP CỰC ĐỈNH BẰNG TÊN LỬA VỚI JQUERY SPRITE
TẠO TOOLTIP ĐƠN GIẢN KHÔNG CẦN JAVASCRIPT
[HƯỚNG DẪN] PHÓNG TO ẢNH CÙNG VỚI TIÊU ĐỀ VỚI ZOOM THUMNAIL IMAGE JQUERY

1.3 Nội dung CSS

Phần css này mình định dạng 1 tí cho trang thêm sinh động nhé:
	*{margin:0px; padding:0px}
	body{
		margin:0px auto; width:900px; 
		background: url(bg_2cwebvn.png);
		font: bold 13px "Times New Roman";
	}
	h1{
		color: #DB2E66; 
		margin:50px 0px 50px;
	}
	a{	color:#514448; 	text-decoration:none; }
	a.back{ font-size:15px; color:#00F; }
	a:HOVER{ color: #DB2E66; }
	table{ border-collapse:collapse; }
	table tr td, table tr th{ padding:8px 10px; }

Và đây là kết quả sau khi định dạng html và css:
Chọn tất cả các checkbox bằng jQuery và Javascript - 01 - 2Cwebvn

1.4 Nội dung jQuery

Phần jQuery gồm đoạn code nho nhỏ nhưng rất lợi hại đấy :)) :
	
	$(document).ready(function() {
		// Sự kiện khi ô checkAll được check
		$("input[name='checkAll']").click(function() {
		
			// Thêm thuộc tính checked cho ô checkAll
			var checked = $(this).attr("checked");
			
			// Thêm thuộc tính checked cho ô checkbox khác
			$("#myTable tr td input:checkbox").attr("checked", checked);
		});
	});
	

2. Check/Uncheck DÙNG JAVASCRIPT

Phần 2 này chúng ta sẽ check/uncheck dùng JAVASCRIPT.

2.1 Phần HTML

Phần HTMl chúng ta chỉ cần thêm sự kiện onclick() cho ô có tên checkAll, nó sẽ như sau.

2.2 Phần Javascript

Phần Javascript này mình không cần include thư viện jQuery, mình chỉ viết hàm để check như sau:
	function Check(chk)
	{
		// Nếu checkbox có tên checkAll được check
		if(document.fcheck.checkAll.checked==true){
			for (i = 0; i < chk.length; i++) // chạy vòng lặp để check tất cả
				chk[i].checked = true ;
		}else{
			for (i = 0; i < chk.length; i++) // chạy vòng lặp để uncheck tất cả
				chk[i].checked = false ;
		}
	}
	
Và đây là kết quả sau khi làm xong.
Chọn tất cả các checkbox bằng jQuery và Javascript - 02 - 2Cwebvn
NOTE : 2 phần này mình đã test hết rồi và chạy ok, các bạn thích dùng cách nào thì dùng. Theo bản thân mình thì mình thường dùng cách thứ 2 vì khỏi phải load thư viện jQuery. Mình đã viết rất chi tiết, có cả demo và download, nếu các bạn có phần nào không hiểu thì để lại comment bên dưới nhé.

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments