Hướng dẫn tạo checkbox đẹp từ bootstrap

Hướng dẫn tạo checkbox đẹp từ bootstrap

Boostrap được biết đến là framework css tốt nhất hiện nay. Bạn có thể dùng css framework bootstrap để thiết kế theme wordpress responsive trên thiết bị mobile cũng như lập trình website ứng dụng.Nếu như bạn đang cần xử lý form trong bootstrap có thể kết hợp dùng css sau để tạo nên phần từ checkbox,radio đẹp từ boostrap mà không cần dùng xử lý jquery.Xem hình demo.

tạo checkbox radio đẹp từ boostrap và css

tạo checkbox radio đẹp từ boostrap và css

Để làm được các button này bạn cần sử dụng boostrap.css và bootstrap.js

Code html cho đoạn code trên :

Tiếp theo là css để định dạng :

Tuy nhiên bạn cần lưu ý để bắt thuộc tính checked từ form , nó được xử lý từ class active trong thẻ label

Vì vậy bạn cần dùng 1 function để kiểm tra trên thẻ label xem radio hay checkbox có value = với giá trị từ cơ sở dữ liệu để in ra class active tại label.
Bạn có thể xem demo trực tiếp tại : https://bootsnipp.com/snippets/featured/checkboxradio-css-only
Hiện tại mình viết code check value radio status bằng laravel nên trên thẻ label sẻ có code như sau :

Ở đây $khachhang là biến lấy 1 row trong table khách hàng và column status , kiềm tra nếu = 1 thì in ra class active, khi đó radio sẽ tự động hiển thị checked.tương tự cho các ngôn ngữ khác bạn áp dụng tương tự nhé.

 

Đánh giá bài viết

developer web wordpress

Share this post