Thực ra chúng đều thuộc về nhóm thẻ input nhưng có thuộc tính type là radio button và checkbox. Nhóm thẻ input là không thể thiếu khi muốn làm form nhập liệu và chúng
thường xuyên kết hợp với Javascript để validate (xác thực các trường dữ liệu). Bên cạnh 5 type rất hay dùng gồm: text, password, submit, reset và email thì 2 type chuyên dụng để tạo các lựa chọn là Radio button và Checkbox bạn cũng
cần nắm rõ.
Type này được dùng để chọn một trong nhiều lựa chọn, chẳng hạn chọn giới tính, chọn quốc gia đang sinh sống. Code mẫu: <form>
<input name="gender" type="radio" value="Nam" />Nam
<input name="gender" type="radio" value="Nữ" />Nữ
<input name="gender" type="radio" value="Khác" />Khác
</form>
Kết quả:
Nếu bạn không để thuộc tính name có cùng tên thì bạn sẽ chọn được 2 cái cùng lúc, do vậy cần lưu ý name đồng bộ khi dùng radio, vì với radio có nghĩa là chúng ta muốn chỉ một trong các lựa chọn được chọn mà thôi.
CheckboxRadio buttons dùng để chọn chỉ một cái trong nhiều lựa chọn còn checkbox thì
ngược lại, nó cho phép bạn không chọn lựa cái nào hoặc chọn nhiều cái (từ một cho đến tất cả). Code mẫu: <form>
<input type="checkbox" name="sport" value="Bóng đá">Bóng đá
<input type="checkbox" name="sport" value="Bơi lội">Bơi lội
<input type="checkbox" name="sport" value="Điền kinh">Điền kinh
<input type="checkbox" name="sport" value="Cầu lông">Cầu lông
<input type = "checkbox" name= "sport" value="Võ thuật">Võ thuật
</form>
Kết quả:
Thuộc tính checkedĐây là thuộc tính được dùng để đánh dấu trước một lựa chọn nào đó, chẳng hạn một Form nhập liệu yêu cầu bạn nhập Quốc gia đang sinh sống, nhưng nó cũng xác định được địa chỉ IP của bạn xuất phát từ Việt Nam nên đã tick sẵn vào đây từ trước cho bạn. Điều này giúp người dùng của bạn giảm thiểu các thao tác phải nhập và cũng
hạn chế được tối đa việc nhập sai dữ liệu. Ví dụ:
Code mẫu: <form>
<input checked="checked" name="gioitinh" type="radio" value="VN" />Việt Nam
<input name="gioitinh" type="radio" value="TQ" />Trung Quốc
<input name="gioitinh" type="radio" value="NB" />Nhật Bản
<input name="gioitinh" type="radio" value="HQ" />Hàn Quốc
</form>
Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những thư viện (CSS, Javascript) giúp bạn custom đối tượng checkbox và radio button trong trang web một cách dễ dàng nhanh chóng cùng với thiết kế đẹp mắt nhé!
Thư Viện Pretty CheckboxPretty Checkbox là một thư viện CSS giúp bạn có thể tạo ra những nút radio và button đẹp mắt cho trang web. Cách Thiết lập Thư Viện Pretty CheckboxĐể thiết lập thư viện
này cho trang web thì bạn có thể sử dụng một số cách sau đây nhé: Cài đặt qua yarn: yarn add pretty-checkbox Cài đặt qua npm: install pretty-checkbox Cài đặt qua CDN:
https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css Để dễ dàng hướng dẫn và thiết lập cho trang web thì mình sẽ sử dụng cách cài đặt thư viện thông qua CDN bằng đoạn mã dưới đây nhé: HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Radio Và Checkbox Bằng Thư Viện Pretty Checkbox</title>
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
</head>
<body>
</body>
</html>
Tạo CheckBox Cơ Bản Bằng Pretty CheckboxPhần này chúng ta sẽ đi vào tạo một checkbox cơ bản bằng thư viện Pretty checkbox thông qua đoạn mã dưới đây
nhé: HTML<div class="pretty p-default">
<input type="checkbox" />
<div class="state">
<label>Hình Dạng Mặc Định</label>
</div>
</div> <!-- Sử Dụng Class p-curve -->
<div class="pretty p-default p-curve">
<input type="checkbox" />
<div class="state">
<label>Hình Dạng Curve</label>
</div>
</div> <!-- Sử Dụng Class p-round -->
<div class="pretty p-default p-round">
<input type="checkbox" />
<div class="state">
<label>Hình Tròn</label>
</div>
</div>
Mình sẽ điều chỉnh vị trí của các đối tượng checkbox ra giữa màn hình bằng đoạn mã CSS sau nhé: CSS*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1b2a49;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
Và kết quả cuối cùng bạn xem trên Codepen ở bên dưới nhé: See the Pen Tạo CheckBox Cơ
Bản Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Tạo CheckBox Fill Bằng Pretty CheckboxĐể tạo checkbox fill cho checkbox thì chúng ta có thể sử dụng class p-fill vào trong những đối tượng mà chúng ta muốn thiết lập. Để hiểu rõ
hơn bạn xem đoạn mã dưới đây nhé: <!-- Sử Dụng Class p-fill -->
<div class="pretty p-default p-fill">
<input type="checkbox" />
<div class="state">
<label>Hình Dạng Mặc Định</label>
</div>
</div> <!-- Sử Dụng Class p-fill -->
<div class="pretty p-default p-curve p-fill">
<input type="checkbox" />
<div class="state">
<label>Hình Dạng Curve</label>
</div>
</div> <!-- Sử Dụng Class p-fill -->
<div class="pretty p-default p-round p-fill">
<input type="checkbox" />
<div class="state">
<label>Hình Tròn</label>
</div>
</div>
Đoạn mã CSS mình sử dụng y như ví dụ trên nha. Bên dưới là kết quả nhé: See the Pen Tạo CheckBox filln Bằng Pretty Checkbox by haycuoilennao19
(@haycuoilennao19) on CodePen. Nguồn Tạo CheckBox Thick Bằng Pretty CheckboxPhần tiếp theo chúng ta sẽ đi vào tạo checkbox thick thông qua class p-thick bằng đoạn mã bên dưới nhé: HTML<!-- Sử Dụng Class p-thick -->
<div class="pretty p-default p-thick">
<input type="checkbox" />
<div class="state">
<label>Hình Dạng Mặc Định</label>
</div>
</div> <!-- Sử Dụng Class p-thick -->
<div class="pretty p-default p-curve p-thick">
<input type="checkbox" />
<div class="state">
<label>Hình Dạng Curve</label>
</div>
</div> <!-- Sử Dụng Class p-thick -->
<div class="pretty p-default p-round p-thick">
<input type="checkbox" />
<div class="state">
<label>Hình Tròn</label>
</div>
</div>
Và kết quả bạn xem ở bên dưới nha: See the Pen Tạo CheckBox thick Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Thiết Lập Màu Sắc Cho CheckboxThư viện này sử dụng cách đặt tên cho class màu sắc khá giống với Bootstrap ví dụ như là primary: màu xanh dương, danger: màu đỏ, success: màu xanh lá cây... Và để hiển thị màu sắc thì bạn chỉ cần gọi class theo cú pháp là:
p-color (Với color có thể là primary, danger, info...) Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé: HTML<!-- Sử dụng class p-primary -->
<div class="pretty p-default">
<input type="checkbox" />
<div class="state p-primary">
<label>Primary</label>
</div>
</div> <!-- Sử dụng class p-success -->
<div class="pretty p-default">
<input type="checkbox" />
<div class="state p-success">
<label>Success</label>
</div>
</div> <!-- Sử dụng class p-info -->
<div class="pretty p-default">
<input type="checkbox" />
<div class="state p-info">
<label>Info</label>
</div>
</div> <!-- Sử dụng class p-warning -->
<div class="pretty p-default">
<input type="checkbox" />
<div class="state p-warning">
<label>Warning</label>
</div>
</div> <!-- Sử dụng class p-danger -->
<div class="pretty p-default">
<input type="checkbox" />
<div class="state p-danger">
<label>Danger</label>
</div>
</div>
Và kết quả bạn xem dự án Codepen bên dưới nhé: See the Pen Tạo CheckBox color Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on
CodePen. Nguồn Tạo Nút Switch Với Pretty CheckboxĐể tạo nút switch(chuyển đổi trạng thái) bằng thư viện này thì bạn chỉ cần sử dụng class p-switch cho đối dượng mà chúng ta muốn thiết lập. Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé: HTML<!-- Sử dụng class p-switch -->
<div class="pretty p-switch">
<input type="checkbox" />
<div class="state">
<label>Outline</label>
</div>
</div> <!--Sử dụng class p-switch -->
<div class="pretty p-switch p-fill">
<input type="checkbox" />
<div class="state">
<label>Fill</label>
</div>
</div> <!-- Sử dụng class p-switch -->
<div class="pretty p-switch p-slim">
<input type="checkbox" />
<div class="state">
<label>Slim</label>
</div>
</div>
Và kết quả bạn xem ở dưới đây nha: See the Pen Tạo CheckBox switch Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Thiết Lập Icon Cho checkboxTrong phần này chúng ta sẽ đi vào tìm hiểu cách thay đổi các icon mặc định trong thư viện pretty checkbox bằng icon của Font-Awesome v4.7 nhé! Có hai điều mình cần lưu ý là: - Khi muốn thay đổi icon thì phải đặt thêm class
p-icon vào thẻ div có chứa class pretty. - Bạn phải đặt thêm class
icon vào trong thẻ <i> của Font Awesome.
Ví dụ
<i class="icon fa fa-check" aria-hidden="true"></i>
Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé: HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Radio Và Checkbox Bằng Thư Viện Pretty Checkbox</title>
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="pretty p-icon p-curve">
<input type="checkbox" />
<div class="state p-success">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label> Kiểm Tra</label>
</div>
</div>
</body>
</html>
Do file CSS giống ở trên nên mình sẽ không viết lại nha. Và kết quả bạn xem dự án Codepen dưới đây nhé: See the Pen
Thay doi icon cho checkbox trong pretty checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Tạo Hiệu Ứng Aniamtion cho CheckboxTrong phần này chúng ta sẽ đi vào tìm hiểu cách
tạo hiệu ứng chuyển động cho checkbox thông qua một số class mà thư viện cung cấp như là p-smooth, p-jelly, p-tada, p-rotate, p-pulse. Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé: HTML<!--Sử dụng class p-smooth-->
<div class="pretty p-default p-smooth">
<input type="checkbox" />
<div class="state p-success">
<label>p-smooth</label>
</div>
</div> <!--Sử dụng class p-jelly-->
<div class="pretty p-icon p-curve p-jelly">
<input type="checkbox" />
<div class="state p-success">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label>p-jelly</label>
</div>
</div> <!--Sử dụng class p-tada-->
<div class="pretty p-icon p-curve p-tada">
<input type="checkbox" />
<div class="state p-success">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label> p-tada</label>
</div>
</div> <!--Sử dụng class p-rotate-->
<div class="pretty p-icon p-curve p-rotate">
<input type="checkbox" />
<div class="state p-success">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label>p-rotate</label>
</div>
</div> <!--Sử dụng class p-pulse-->
<div class="pretty p-icon p-curve p-pulse">
<input type="checkbox" />
<div class="state p-success">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label>p-pulse</label>
</div>
</div>
Và kết quả bạn xem bên dưới Codepen nhé: See the Pen
Thiet Lap hieu ung animation cho checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Xóa Border cho CheckboxThư viện này cung cấp cho chúng ta một tính năng khá hữu ích là hiển
thị toàn bộ icon mà không chứa đường viền(border) của ô checkbox bằng việc sử class p-plain. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé: HTML<!--Sử dụng class p-plain-->
<div class="pretty p-icon p-round p-smooth p-plain">
<input type="checkbox" />
<div class="state p-success-o">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label>p-plain</label>
</div>
</div>
Và kết quả bạn xem dưới đây nha: See the Pen Xóa Border cho Checkbox by
haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Việc tạo radion button khá giống với cách mà chúng ta tạo checkbox button ở trong thư viện pretty checkbox thông qua việc gắn các class ở ví dụ trên cho đối tượng và
thay type="checkbox" sang type="radio. Và để hiểu rõ hơn chúng ta cùng xem đoạn mã sau nhé: HTML<div class="pretty p-default p-curve">
<input type="radio" name="color" />
<div class="state p-primary-o">
<label>Primary</label>
</div>
</div> <div class="pretty p-default p-curve">
<input type="radio" name="color" />
<div class="state p-success-o">
<label>Success</label>
</div>
</div> <div class="pretty p-default p-curve">
<input type="radio" name="color" />
<div class="state p-info-o">
<label>Info</label>
</div>
</div> <div class="pretty p-default p-curve">
<input type="radio" name="color" checked />
<div class="state p-warning-o">
<label>Warning</label>
</div>
</div> <div class="pretty p-default p-curve">
<input type="radio" name="color" />
<div class="state p-danger-o">
<label>Danger</label>
</div>
</div>
Và kết quả bạn xem bên dưới nhé: See the Pen tao radio button bang pretty checkbox by haycuoilennao19
(@haycuoilennao19) on CodePen. Nguồn Chúng ta cũng sẽ sử dụng các class animation cho checkbox phía trên để áp dụng vào radio button thông qua đoạn mã sau đây nhé: HTML<div class="pretty p-icon p-curve p-tada">
<input type="radio" name="radio66">
<div class="state p-primary-o">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label>HTML</label>
</div>
</div> <div class="pretty p-icon p-curve p-rotate">
<input type="radio" name="radio66">
<div class="state p-success-o">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label> Javascript</label>
</div>
</div> <div class="pretty p-icon p-curve p-pulse">
<input type="radio" name="radio66">
<div class="state p-info-o">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label> Python</label>
</div>
</div> <div class="pretty p-icon p-curve p-jelly">
<input type="radio" name="radio66">
<div class="state p-warning">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label> PHP</label>
</div>
</div> <div class="pretty p-icon p-curve p-smooth">
<input type="radio" name="radio66">
<div class="state">
<i class="icon fa fa-check" aria-hidden="true"></i>
<label>Swift</label>
</div>
</div>
Và kết quả bạn xem dưới đây nhé:
See the Pen tao raio button animation bang pretty checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn Nếu bạn muốn tham khảo thêm về Pretty checkbox thì có thể truy cập ở đây nhé! Các Thư Viện Khác Tạo Checkbox Cho Trang WebiCheckNguồn SwitcheryNguồn jQuery TogglesNguồn Awesome Bootstrap Checkbox v1.0.0Nguồn CSS Checkbox LibraryNguồn Nếu bạn muốn them khảo tham về các Radion và Checkbox button khác thì có thể truy cập đường link bên dưới
nhé!
https://www.niemvuilaptrinh.com/article/Nhung-Radio-Button-Dep-Cho-Thiet-Ke-Va-Phat-Trien-Web-2020 Tổng kết:Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo checkbox và radion button hữu ích dành cho việc phát triển, thiết kế web và nếu có
thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ! | 
