3+ thông tin hữu ích về Checkbox HTML

Trường hợp check một checkbox:

Hay với trường hợp có nhiều checkbox:

Để biết được element này có phải là Checkbox HTML hay không, ta sẽ dựa vào attribute trong thẻ HTML của phần tử, ở ví dụ trên ta có thể quan sát thấy các Checkbox HTML đều có type = “checkbox”.

Đầu tiên, ta sẽ kiểm tra xem checkbox này đã được check hay chưa, hay kiểm tra checkbox này có giá trị default đã đúng chưa – và thường thì giá trị default của cách checkbox sẽ là chưa check, bằng cách sử dụng hàm Selected().Nếu như checkbox đó đã được check, kết quả trả về là True, và ngược lại chưa được check thì kết quả trả về là False.

//Kiểm tra check box đã được check hay chưaBoolean isSelected = driver.FindElement(By.Id(“isAgeSelected”)).Selected;//Nếu chưa được check thì click vào ô check box đóif(isSelected == false){ driver.FindElement(By.Id(“isAgeSelected”)).Click();}

Có thể thực hiện với trường hợp ngược lại là nếu checkbox đã được check thì thực hiện bỏ check cho check box, trường hợp này về bản chất thì không khác so với trường hợp true, vì với check box thì ta click lần 1 là check, click tiếp lần 2 thì là bỏ check, do đó ta cũng sẽ làm tương tự đối với trường hợp false này.

Với trường hợp có nhiều check box và ta muốn check nhiều hơn 1 trong số đó thì cũng chỉ cần kiểm tra và thêm thao tác click vào ô checkbox tiếp theo muốn

check:id=”easycont”>/div/div<2>/div<2>/div<2>/div<1>/label/input”)).Click();//Check ô checkbox tiếp theodriver.FindElement(By.XPath (“.//*<
id=”easycont”>/div/div<2>/div<2>/div<2>/div<2>/label/input”)).Click();

Và cách hay hơn là chúng ta dùng vòng lặp để xác định

// Tìm các checkbox element cùng loại theo typeIList oCheckBox = driver.FindElements(By.XPath(“https://div<
type=”checkbox”>”));// Hàm Count sẽ trả cho bạn số lượng checkbox/radio nó lấy được lưu vào biến Sizeint Size = oCheckBox.Count;// Start the loop from first checkbox to last checkboxefor (int i = 0; i  

Kích thước hộp kiểm Checkbox HTML

Giả sử bạn muốn thay đổi kích thước của hộp kiểm Checkbox HTML. Bạn có thể làm như vậy bằng hai phương pháp khác nhau.

Phương pháp đầu tiên là đặt thuộc tính chiều rộng và chiều cao trong CSS. Trong ví dụ bên dưới, tôi đặt chiều rộng và chiều cao của hộp kiểm thành 10px. Điều đó làm cho hộp kiểm nhỏ hơn kích thước mặc định của nó, khoảng 13px x 13px trong Chrome.

Phương pháp thứ hai là sử dụng thuộc tính biến đổi CSS . Cụ thể, bạn sẽ sử dụng phương thức scale () để thay đổi kích thước của hộp kiểm. Bất kỳ giá trị nào bạn đặt bên trong dấu ngoặc đơn sẽ làm tăng hoặc giảm kích thước của hộp kiểm bằng bội số kích thước ban đầu của nó. Phương pháp này hoạt động cho tất cả các trình duyệt chính, bao gồm cả Mozilla Firefox. Trong ví dụ bên dưới, tôi đặt thuộc tính biến đổi thành tỷ lệ (1.5) để nó gấp một lần rưỡi kích thước mặc định của nó.

Sự khác biệt giữa hộp kiểm Checkbox HTML và nút radio

Hộp kiểm luôn là một hộp vuông và cho phép chọn một hoặc nhiều mục. Nút radio là một vòng tròn chỉ cho phép chọn một tùy chọn. Nếu bạn đang tạo một danh sách cần chọn nhiều tùy chọn, hãy sử dụng các hộp kiểm. Nếu bạn chỉ muốn chọn một tùy chọn và ngăn nhiều tùy chọn được chọn, hãy sử dụng nút radio.

Tôi nên sử dụng “hộp kiểm” hay “hộp kiểm” trong văn bản của mình?

Cả hai biểu mẫu đều đúng và việc sử dụng nó phụ thuộc vào hướng dẫn kiểu bạn đang làm theo. Khi mô tả một hộp hoặc đối tượng có thể chọn, chúng tôi làm theo Hướng dẫn Kiểu dáng của Microsoft và viết “hộp kiểm” dưới dạng hai từ trong tất cả các bài viết của chúng tôi. Khi mô tả một giá trị thuộc tính, chẳng hạn như giá trị “hộp kiểm” trong thẻ đầu vào HTML, nó phải là một từ.

Lời kết

Hi vọng với bài viết này Tenten đã giúp các bạn hiểu được cách mà một custom Checkbox HTML hoạt động như thế nào để từ đó có thể tự làm ra được nhiều custom Checkbox HTML hay radio khác hoặc có thể hiểu được các đoạn code trên mạng họ làm như thế nào và cách làm ra sao để có thể áp dụng vào dự án của các bạn một cách hiệu quả.

Các tìm kiếm liên quan đến chủ đề “checkbox html”

Bài viết liên quan

Thẻ iFrame HTML là gì? Hướng dẫn cách sử dụng iFrame trong HTML

3 bước để tạo slideshow HTML – Thẻ HTML slider

Lấy màu trong bảng màu html với 4 công cụ chuyên nghiệp