Hộp kiểm html

Chào các bạn, hôm nay tuoitreit. vn xin hướng dẫn bạn cách chỉ cho phép chọn 1 trong nhiều hộp kiểm
You post as after nhé

JavaScript

Nội dung chính Show

• Hộp kiểm thư viện đẹp
• Hộp kiểm Cách thiết lập Thư Viện Pretty
• Tạo CheckBox Cơ Bản Bằng Pretty Checkbox
• Tạo CheckBox Điền Bằng Khá Checkbox
• Tạo CheckBox Dày Bằng Checkbox Khá
• Hộp kiểm Thiết Lập Màu Sắc Cho
• Tạo nút chuyển đổi với hộp kiểm đẹp
• Hộp kiểm Biểu tượng Thiết lập Cho
• Tạo Hiệu ứng Hoạt ảnh cho Hộp kiểm
• Clear Border to Checkbox
• Create Radion Button Bằng Thư Viện Pretty Checkbox
• Create Effect Animation Cho Radio Button
• Các Thư Viện Khác Tạo Checkbox Chợ Trang Web
• tôi kiểm tra
• công tắc
• Chuyển đổi jQuery
• Hộp kiểm Bootstrap tuyệt vời v1. 0. 0
• Thư viện hộp kiểm CSS
• Tổng kết

HTML

Chúc bạn thành công
Mọi người sao chép vui lòng ghi rõ nguồn tuoitreit. vn

 

Cho một hộp kiểm ô và 2 nút, hãy xử lý sự kiện khi nhấp vào nút thứ nhất thì thiết lập trạng thái đã chọn cho hộp kiểm, khi nhấp vào nút thứ hai thì hủy bỏ trạng thái đã chọn cho hộp kiểm

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Như thường lệ, đối với bài này, ta sử dụng thuộc tính đã kiểm tra của HTML đối tượng để thay đổi trạng thái đã kiểm tra đối với hộp kiểm như sau

Hôm nay chúng ta sẽ cùng nhau đi vào khám phá những thư viện (CSS, Javascript) giúp bạn tùy chỉnh hộp kiểm đối tượng và nút radio trong trang web một cách dễ dàng, nhanh chóng cùng với thiết kế đẹp mắt nhé.

---

Hộp kiểm thư viện đẹp

Pretty Checkbox là một thư viện CSS giúp bạn có thể tạo ra các nút radio và nút đẹp mắt cho trang web

Hộp kiểm Cách thiết lập Thư Viện Pretty

Để thiết lập thư viện này cho trang web, bạn có thể sử dụng một số cách sau đây nhé

Cài đặt qua sợi.

   
   
     Hình Dạng Mặc Định
   

Settings qua npm.

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Cài đặt qua CDN

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Để dễ dàng hướng dẫn và thiết lập cho trang web, 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

 
 
     
     
     
     [email protected]/dist/pretty-checkbox.min.css">
 
 

 

Tạo CheckBox Cơ Bản Bằng Pretty Checkbox

Phần này chúng ta sẽ đi vào việc tạo hộp kiểm cơ bản bằng thư viện Hộp kiểm đẹp thông qua đoạn mã dưới đây nhé

HTML

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Mình sẽ điều chỉnh hộp kiểm vị trí của các đối tượng 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é

Xem Pen Create CheckBox Cơ Bản Bằng Checkbox đẹp của haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Tạo CheckBox Điền Bằng Khá Checkbox

Để tạo hộp kiểm điền vào hộp kiểm, chúng ta có thể sử dụng lớp

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

 
   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Đ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é

Xem Pen Create CheckBox filln Bằng Pretty Checkbox của haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Tạo CheckBox Dày Bằng Checkbox Khá

Phần tiếp theo chúng ta sẽ đi vào việc tạo hộp kiểm thick thông qua class

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

HTML

 
   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Và kết quả bạn xem ở bên dưới nha

Xem Pen Tạo CheckBox dày Bằng Checkbox Đẹp của haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Hộp kiểm Thiết Lập Màu Sắc Cho

Thư viện này sử dụng cách đặt tên cho lớp có màu sắc khá giống với Bootstrap ví dụ như là

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

*{
      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;
 }

Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé

HTML

 
   
   
     Primary
   
 
 
 
 
   
   
     Success
   
 
 
 
 
   
   
     Info
   
 
 
 
 
   
   
     Warning
   
 
 
 
 
   
   
     Danger
   
 

Và kết quả bạn xem dự án Codepen bên dưới nhé

Xem Pen Tạo CheckBox color Bằng Checkbox Đẹp bởi haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Tạo nút chuyển đổi với hộp kiểm đẹp

Để tạo nút chuyển đổi (chuyển đổi trạng thái) bằng thư viện này, bạn chỉ cần sử dụng lớp

*{
      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;
 }

HTML

 
   
   
     Outline
   
 
 
 
 
   
   
     Fill
   
 
 
 
 
   
   
     Slim
   
 

Và kết quả các bạn xem ở dưới đây nha

Xem switch Pen Tạo CheckBox Bằng Checkbox Đẹp bởi haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Hộp kiểm Biểu tượng Thiết lập Cho

Trong phần này, chúng ta sẽ đi vào tìm hiểu cách thay đổi các biểu tượng mặc định trong hộp kiểm thư viện đẹp bằng biểu tượng 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 lớp

  *{
        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;
   }
  

  2 vào thẻ div có chứa lớp

  *{
        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;
   }
  

  3
• You must set more class

  *{
        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;
   }
  

  4 in the tag

  *{
        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;
   }
  

  5 of Font Awesome. Ví dụ
  

Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé

HTML

 

     
     
     
     [email protected]/dist/pretty-checkbox.min.css">
     [email protected];500&display=swap" rel="stylesheet">
     
 

     
         
         
             
              Kiểm Tra
         
     
 
 

Do file CSS giống ở trên nên mình sẽ không viết lại nha. Và kết quả các bạn xem dự án Codepen dưới đây nhé

Xem biểu tượng Pen Thầy doi cho checkbox trong checkbox đẹp bởi haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Tạo Hiệu ứng Hoạt ảnh cho Hộp kiểm

Trong 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 hộp kiểm thông qua một số lớp mà thư viện cung cấp như là

*{
      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;
 }

*{
      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;
 }

*{
      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;
 }

*{
      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;
 }

 
   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

HTML

 
   
   
     p-smooth
   
 

 
 
   
   
     
     p-jelly
   
 

 
 
   
   
     
      p-tada
   
 

 
 
   
   
     
     p-rotate
   
 

 
 
   
   
     
     p-pulse
   
 

Và kết quả bạn xem bên dưới Codepen nhé

Xem hộp kiểm Pen Thiet Lap hieu ứng cho hoạt hình của haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Clear Border to Checkbox

Thư viện này cung cấp cho chúng tôi một tính năng khá hữu ích là hiển thị toàn bộ biểu tượng mà không chứa đường viền (đường viền) của hộp kiểm ô bằng cách sử dụng lớp

 
   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

HTML

 
   
   
     
     p-plain
   
 

Và kết quả các bạn xem dưới đây nha

Xem Xóa viền cho Hộp kiểm của haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Create Radion Button Bằng Thư Viện Pretty Checkbox

Việc tạo nút radion khá giống với cách mà chúng ta tạo nút hộp kiểm trong hộp kiểm đẹp trong thư viện thông qua việc gắn các lớp ở ví dụ trên đối tượng và thay thế

 
   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

 
   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

HTML

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Và kết quả bạn xem bên dưới nhé

Xem hộp kiểm Pen tao radio button bang xinh bởi haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Create Effect Animation Cho Radio Button

Chúng ta cũng sẽ sử dụng hoạt ảnh lớp cho hộp kiểm phía trên để áp dụng vào nút radio thông qua đoạn mã sau đây nhé

HTML

   
   
     Hình Dạng Mặc Định
   
 
 
 
 
   
   
     Hình Dạng Curve
   
 
 
 
 
   
   
     Hình Tròn
   
 

Và kết quả các bạn xem bên dưới nhé

Xem hoạt hình nút Pen tao raio bang checkbox xinh xắn của haycuoilennao19 (@haycuoilennao19) trên CodePen

Nguồn

Nếu bạn muốn tham khảo thêm về Pretty checkbox thì có thể truy cập tại đây nhé

Các Thư Viện Khác Tạo Checkbox Chợ Trang Web

tôi kiểm tra

Nguồn

công tắc

Nguồn

Chuyển đổi jQuery

Nguồn

Hộp kiểm Bootstrap tuyệt vời v1. 0. 0

Nguồn

Thư viện hộp kiểm CSS

Nguồn

Nếu bạn muốn họ khảo sát về các Radion và nút Hộp kiểm khác, thì có thể truy cập vào đường liên kết 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 các bạn những checkbox kiến ​​tạo và nút radion 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ẻ