Đài CSS: đã chọn

Thành phần radio có thể được sử dụng để cho phép người dùng chọn một tùy chọn duy nhất từ ​​một hoặc nhiều tùy chọn có sẵn được mã hóa bằng các lớp tiện ích từ Tailwind CSS và có sẵn ở nhiều kiểu, biến thể và màu sắc cũng như hỗ trợ chế độ tối

Đảm bảo rằng bạn đã thêm Flowbite làm plugin bên trong dự án CSS Tailwind của mình để áp dụng tất cả các kiểu cần thiết cho thành phần radio

Đài phát thanh ví dụ #

Sử dụng ví dụ mặc định của thành phần radio với trạng thái được chọn và không được chọn

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Default radio

Checked state

Mở rộng mã

Trạng thái bị vô hiệu hóa #

Áp dụng thuộc tính

Disabled radio

Disabled checked

1 cho thành phần radio để không cho phép người dùng lựa chọn

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Disabled radio

Disabled checked

Mở rộng mã

Liên kết vô tuyến #

Sử dụng ví dụ này nếu bạn muốn bao gồm một thẻ liên kết bên trong nhãn của thành phần radio

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Radio button with a link inside.

Mở rộng mã

Văn bản trợ giúp #

Bắt đầu với ví dụ này nếu bạn muốn thêm văn bản phụ vào nhãn cho thành phần radio

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Sao chép

Đối với các đơn hàng được vận chuyển từ $25 đối với sách hoặc $29 đối với các danh mục khác

Free shipping via Flowbite

For orders shipped from $25 in books or $29 in other categories

Mở rộng mã

viền #

Sử dụng ví dụ này để hiển thị các thành phần đầu vào radio bên trong thẻ có đường viền

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Default radio

Checked state

Mở rộng mã

Nhóm danh sách radio #

Ví dụ này có thể được sử dụng để hiển thị danh sách các nút radio bên trong danh sách được nhóm

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Identification

  • Driver License

  • State ID

  • US Millitary

  • US Passport

Mở rộng mã

Nhóm danh sách ngang #

Sử dụng ví dụ này để nhóm các thành phần nút radio bên trong danh sách

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Identification

  • Driver License

  • State ID

  • US Millitary

  • US Passport

Mở rộng mã

Đài phát thanh trong trình đơn thả xuống #

Dưới đây là ví dụ về nhóm danh sách mà bạn có thể sử dụng ngay

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

________số 8

Mở rộng mã

Bố cục nội tuyến #

Sử dụng lớp

Disabled radio

Disabled checked

2 cho phần tử bao bọc để căn chỉnh theo chiều ngang các phần tử radio

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Disabled radio

Disabled checked

0

Mở rộng mã

Bố cục nâng cao #

Sử dụng ví dụ này về thành phần radio nâng cao hơn để thêm thông tin và cập nhật kiểu của toàn bộ thẻ thay vì chỉ dấu chấm tròn

Làm cách nào để thêm CSS cho nút radio đã chọn?

Để áp dụng kiểu CSS cho nhãn của nút radio đã chọn hoặc hộp kiểm đã chọn, bạn có thể sử dụng. đã kiểm tra bộ chọn lớp giả CSS với bộ kết hợp anh chị em liền kề (+) . Các. bộ chọn lớp giả CSS đã kiểm tra khớp với bất kỳ nút radio, hộp kiểm hoặc thành phần tùy chọn nào đã chọn/đã chọn.

Điều gì được kiểm tra trong nút radio?

Nếu một nút radio được chọn, thuộc tính được chọn của nó là true . Sau đó, chúng tôi gán giá trị của nút radio đã chọn cho biến Kích thước đã chọn. Vì chỉ có thể kiểm tra một nút radio trong một nhóm radio tại một thời điểm, nên vòng lặp được kết thúc ngay lập tức bằng câu lệnh break.

Việc sử dụng kiểm tra trong CSS là gì?