Làm cách nào để kiểm tra xem hộp kiểm có được chọn trong bootstrap không?

Trong hướng dẫn này, chúng ta sẽ học cách kiểm tra xem hộp kiểm có được kiểm tra trong JavaScript hay không. Hộp kiểm là loại đầu vào trong HTML, hoạt động như hộp lựa chọn. Các nút radio cùng nhóm cho phép người dùng chỉ chọn một giá trị. Tuy nhiên, hộp kiểm thuộc cùng một nhóm cho phép người dùng chọn nhiều giá trị

Ngoài ra, bạn có nhiều cách sử dụng các hộp kiểm trong tâm trí của mình. HTML có thể thêm hộp kiểm vào trang web, nhưng để thêm hành vi vào hộp kiểm, chúng tôi phải sử dụng JavaScript. Các lập trình viên có thể thêm các hành vi khác nhau vào hộp kiểm dựa trên việc hộp kiểm đó có được chọn hay không

Sau đây, chúng ta sẽ học cách kiểm tra các hộp kiểm đơn và nhiều có được chọn hay không

Kiểm tra xem một Hộp kiểm duy nhất có được chọn hay không

Trong phần này, chúng ta sẽ học cách kiểm tra xem hộp kiểm có được chọn hay không. Trong JavaScript, chúng ta có thể truy cập phần tử hộp kiểm bằng id, lớp hoặc tên thẻ và áp dụng ‘. đã chọn' vào phần tử, trả về đúng hoặc sai dựa trên hộp kiểm được chọn

cú pháp

Người dùng có thể làm theo cú pháp dưới đây để kiểm tra hộp kiểm duy nhất có được chọn hay không

let checkbox = document.getElementById("checkbox_id");
let checkbox.checked; // it returns Boolean value

Thí dụ

Trong ví dụ dưới đây, chúng tôi đã tạo hộp kiểm. Ngoài ra, chúng tôi đã thêm trình xử lý sự kiện vào hộp kiểm. Khi người dùng thay đổi giá trị của hộp kiểm, trình xử lý sự kiện sẽ được gọi. Trong trình lắng nghe sự kiện, chúng tôi sẽ kiểm tra xem hộp kiểm có được chọn hay không. Nếu hộp kiểm được chọn, chúng tôi sẽ hiển thị một số văn bản cho div nếu không chúng tôi sẽ làm cho div trống

   
Check whether the Checkbox is checked or not


   
Check whether the Checkbox is checked or not using  .checked attribute 
   
Check the below checkbox to see the text div
   
   
 




   

Ở kết quả trên, người dùng có thể thấy rằng khi họ chọn hộp kiểm, hộp kiểm sẽ hiển thị thông báo “hộp kiểm đã được chọn. ” Khi họ bỏ chọn hộp kiểm, nó không hiển thị gì

Kiểm tra xem nhiều hộp kiểm có được chọn hay không

Thật đơn giản để thêm hành vi vào một hộp kiểm. Trên nhiều trang web, bạn đã thấy rằng khi bạn nhìn thấy cửa sổ bật lên để chấp nhận các điều khoản & điều kiện, nó có nhiều hộp kiểm và khi bạn chọn tất cả các hộp kiểm, chỉ có hộp đó bật nút chấp nhận

Ở đây, chúng ta sẽ làm điều tương tự. Chúng tôi sẽ tạo nhiều hộp kiểm và kiểm tra tất cả các hộp kiểm xem nó có được chọn hay không và trên cơ sở đó, chúng tôi sẽ bật nút

cú pháp

• Truy cập tất cả các hộp kiểm và nút

let checkbox = document.getElementsByName( "checkbox" );
let button = document.getElementById( "btn" );

• Thêm trình xử lý sự kiện vào mọi hộp kiểm

for ( let i = 0; i < checkbox.length; i++ ) {
   checkbox[i].addEventListener( "change", () => {
   });
}

• Bên trong trình lắng nghe sự kiện, kiểm tra tất cả các hộp kiểm có được chọn hay không

button.disabled = false;
for ( let i = 0; i < checkbox.length; i++ ) {
   if ( checkbox[i].checked == false )

   // if any single checkbox is unchecked, disable the button.
   button.disabled = true;
}

Thí dụ

Trong ví dụ dưới đây, chúng tôi đã tạo ba hộp kiểm có cùng tên, có nghĩa là tất cả thuộc về cùng một nhóm. Ngoài ra, chúng tôi đã tạo nút trong HTML và nút truy cập và hộp kiểm bằng cách sử dụng id và tên trong JavaScript

Chúng tôi đã thêm một trình lắng nghe sự kiện trong tất cả các hộp kiểm. Khi bất kỳ giá trị hộp kiểm nào thay đổi, nó sẽ kiểm tra xem tất cả hộp kiểm có được chọn hay không. Nếu tất cả các hộp kiểm được chọn, trình xử lý sự kiện sẽ kích hoạt nút. Nếu không, nút vẫn bị vô hiệu hóa

Ở kết quả trên, người dùng có thể thấy rằng khi họ chọn tất cả các hộp kiểm, nút sẽ được bật, nếu không thì nút sẽ bị tắt

Trong hướng dẫn này, chúng ta đã học cách kiểm tra xem một hoặc nhiều hộp kiểm có được chọn hay không. Chúng tôi đã thêm các hành vi khác nhau vào trang web theo giá trị lựa chọn hộp kiểm

Ngoài ra, người dùng có thể sử dụng các thư viện JavaScript như jQuery, vì vậy người dùng cần ít nỗ lực hơn để kiểm tra nhiều hộp kiểm

thận trọng. Các đạo cụ hỗ trợ các chuỗi HTML (_______9_______0) có thể dễ bị tấn công Cross Site Scripting (XSS) khi chuyển các giá trị thô do người dùng cung cấp. Trước tiên, bạn phải vệ sinh đúng cách đầu vào của người dùng

Bộ chọn lớp giả của CSS :checked đại diện cho bất kỳ phần tử radio (), hộp kiểm (_______12_______) hoặc tùy chọn ( trong phần tử ) được chọn hoặc chuyển sang trạng thái

<div>
  <input type="radio" name="my-input" id="yes" value="yes" />
  <label for="yes">Yeslabel>

  <input type="radio" name="my-input" id="no" value="no" />
  <label for="no">Nolabel>
div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!label>
div>

<select name="my-select" id="fruit">
  <option value="opt1">Applesoption>
  <option value="opt2">Grapesoption>
  <option value="opt3">Pearsoption>
select>

0

Người dùng có thể tương tác với trạng thái này bằng cách kiểm tra/chọn một phần tử hoặc hủy tương tác bằng cách bỏ chọn/bỏ chọn phần tử đó

Ghi chú. Bởi vì các trình duyệt thường coi các là các phần tử được thay thế, nên mức độ mà chúng có thể được tạo kiểu với lớp giả :checked thay đổi tùy theo trình duyệt

:checked

HTML

<div>
  <input type="radio" name="my-input" id="yes" value="yes" />
  <label for="yes">Yeslabel>

  <input type="radio" name="my-input" id="no" value="no" />
  <label for="no">Nolabel>
div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!label>
div>

<select name="my-select" id="fruit">
  <option value="opt1">Applesoption>
  <option value="opt2">Grapesoption>
  <option value="opt3">Pearsoption>
select>

CSS

________số 8_______

Kết quả

Ví dụ này sử dụng lớp giả :checked để cho phép người dùng chuyển đổi nội dung dựa trên trạng thái của hộp kiểm mà không cần sử dụng JavaScript

Làm cách nào để đặt hộp kiểm đã chọn trong Bootstrap?

form-check-label để gắn nhãn các phần tử và. các hộp kiểm biểu mẫu-kiểm tra-đầu vào để tạo kiểu bên trong. container kiểm tra biểu mẫu. Sử dụng thuộc tính đã chọn nếu bạn muốn hộp kiểm được chọn theo mặc định .

Làm cách nào để kiểm tra xem hộp kiểm có được chọn hay không trong PHP?

Hàm isset() là một hàm có sẵn trong PHP để kiểm tra xem một biến có được đặt và không phải là NULL hay không . Hàm này cũng kiểm tra xem một biến, mảng hoặc khóa mảng được khai báo có giá trị null hay không, nếu có, isset() trả về false, nó trả về true trong tất cả các trường hợp có thể khác.

Làm cách nào để hiển thị div khi hộp kiểm được chọn?

Mã CSS có thể được sử dụng để hiển thị/ẩn div khi chọn/bỏ chọn hộp kiểm. chúng tôi đang sử dụng lớp giả. đã chọn được áp dụng trên hộp kiểm để kiểm tra xem hộp kiểm có được chọn hay không và sử dụng + từ khóa, chúng tôi đang chọn phần tử HTML tiếp theo của hộp kiểm loại đầu vào là div. Là hữu ích không?

Làm cách nào để nhận giá trị từ hộp kiểm bootstrap?

Khi bạn nhấp vào hộp kiểm hoặc nhãn, 'giá trị' sẽ thay đổi dấu của nó. Vì vậy, khi bạn muốn nhận giá trị, hãy lấy thuộc tính 'giá trị' và kiểm tra xem giá trị đó lớn hơn hay nhỏ hơn 0 .

Đọc tiếp