Share Tuỳ chỉnh radio và checkbox với thư viện iCheck

filiallion

Administrator
Staff member
Administrator
Messages
319
Points
10
Language
Tiếng Việt
Mặc định, hình dáng của radio và checkbox là do trình duyệt web quy định, vì vậy trên các trình duyệt khác nhau thì radio và checkbox lại có hình dáng khác nhau, không đồng nhất. Nếu các bạn đang muốn thiết kế radio và checkbox đồng nhất một hình dáng trên tất cả các trình duyệt thì các bạn có thể sử dụng thư viện iCheck mà tôi giới thiệu với các bạn ở bài viết này.

Thư viện iCheck là một plugin của jQuery với nhiệm vụ chính là thay đổi hình dáng của radio và checkbox nhưng vẫn đảm bảo hoạt động tốt với tất cả các trạng thái của hai thành phần này. Thư viện iCheck hỗ trợ trên tất cả các trình duyệt phổ biến hiện nay như Internet Explorer, Edge, Firefox, Chrome, Opera, Safari trên cả nền tảng máy tính và di động, trong đó bao gồm cả tính năng chạm được dùng trên các thiết bị cảm ứng.

Để sử dụng thư viện iCheck, các bạn tải tại địa chỉ https://github.com/fronteed/iCheck và tích hợp vào website với nội dung mã lệnh như sau:
HTML:
<link href="path/to/all.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/icheck.min.js"></script>
Bây giờ, các bạn tạo radio và checkbox như ví dụ sau:
HTML:
<div class="iradio checked">
    <input type="radio" checked>
</div>
<div class="icheckbox disabled">
    <input type="checkbox" disabled>
</div>
Các bạn cài đặt thư viện iCheck với nội dung JavaScript sau:
JavaScript:
$(function() {
    $('input').iCheck();
});
Các bạn có thể tham khảo thêm về thư viện iCheck tại địa chỉ https://github.com/fronteed/iCheck.
 
Top