Cách giữ hộp kiểm được chọn trong JavaScript

Question

Tóm lược. trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript để kiểm tra xem hộp kiểm có được chọn hay không, lấy giá trị của các hộp kiểm đã chọn và chọn/bỏ chọn tất cả các hộp kiểm

Nội dung chính Show

Tạo hộp kiểm HTML
Kiểm tra xem hộp kiểm có được chọn không
Nhận giá trị hộp kiểm
Nhận giá trị của nhiều hộp kiểm đã chọn
Kiểm tra / Bỏ chọn tất cả các hộp kiểm
Tạo các hộp kiểm động
Làm cách nào để giữ hộp kiểm được chọn trong JavaScript?
Làm cách nào để xác thực hộp kiểm trong JavaScript?
Làm cách nào để đặt hộp kiểm được chọn theo mặc định trong JavaScript?
Làm cách nào để giữ nhiều hộp kiểm được chọn ngay cả sau khi làm mới trang?

Tạo hộp kiểm HTML

Để tạo checkbox, bạn sử dụng phần tử

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

3 với

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

4 của

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

5 như sau

<input type="checkbox" id="accept"> Accept 
Code language: HTML, XML (xml)

Đó là một phương pháp hay để luôn liên kết hộp kiểm với nhãn để cải thiện khả năng sử dụng và khả năng truy cập. Bằng cách này, việc nhấp vào nhãn cũng sẽ kiểm tra hoặc bỏ chọn hộp kiểm

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

Hoặc

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept label>
Code language: HTML, XML (xml)

Lưu ý rằng giá trị của thuộc tính for của nhãn phải khớp với id của hộp kiểm

Những điều sau đây hoạt động nhưng là thực hành xấu, vì vậy bạn nên tránh nó

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

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

Một hộp kiểm có hai trạng thái. đã kiểm tra và bỏ chọn

Để có được trạng thái của một hộp kiểm, bạn làm theo các bước sau

Đầu tiên, chọn hộp kiểm bằng phương pháp DOM, chẳng hạn như

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

6 hoặc

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

7

Sau đó, truy cập thuộc tính

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

8 của phần tử hộp kiểm. Nếu thuộc tính

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

8 của nó là

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

10, thì hộp kiểm được chọn;

Xem ví dụ sau

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

1

trong ví dụ này

Đầu tiên, tạo phần tử hộp kiểm HTML

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

3

Thứ hai, chọn hộp kiểm có id

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

11 và kiểm tra thuộc tính

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

8

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

6

Vì hộp kiểm không được chọn, bạn sẽ thấy

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

13 trong bảng điều khiển

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

8

Hãy xem xét một ví dụ khác

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

9

Trong ví dụ này, selector

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

14 chọn phần tử có id

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

11 và có thuộc tính

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

8. Ví dụ: nó khớp với phần tử sau

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

3

Nhưng không phải cái này

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

0

Do đó, nếu phần tử hộp kiểm có id

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

11 được chọn, thì

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

18 sẽ trả về. Trên cửa sổ bảng điều khiển, bạn sẽ thấy giá trị

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

13 vì hộp kiểm không được chọn

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

8

Nhận giá trị hộp kiểm

Trang sau hiển thị một hộp kiểm và một nút. Khi bạn nhấp vào nút, bạn sẽ thấy giá trị của hộp kiểm trên cửa sổ bảng điều khiển

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>



Code language: HTML, XML (xml)

2

Khi bạn nhận được thuộc tính

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

30 của hộp kiểm, bạn luôn nhận được chuỗi

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

31 cho dù hộp kiểm đó có được chọn hay không

Nhận giá trị của nhiều hộp kiểm đã chọn

Trang sau hiển thị ba hộp kiểm. Nếu bạn chọn một hoặc nhiều hộp kiểm và nhấp vào nút, nó sẽ hiển thị các giá trị của hộp kiểm đã chọn

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

3

Làm thế nào nó hoạt động

Trong HTML, chúng tôi tạo ba phần tử hộp kiểm có cùng tên (màu) nhưng các giá trị khác nhau

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

4

trong JavaScript

Đầu tiên, thêm trình xử lý sự kiện nhấp chuột vào nút

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

5

Thứ hai, chọn các hộp kiểm đã chọn bằng phương pháp

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

32 bên trong trình xử lý sự kiện nhấp chuột

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

6

Thứ ba, đẩy các giá trị của các hộp kiểm đã chọn vào một mảng

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

7

Thử nghiệm

Kiểm tra / Bỏ chọn tất cả các hộp kiểm

Trang sau có ba hộp kiểm và một nút. Khi bạn nhấp vào nút, nếu các hộp kiểm được chọn, chúng sẽ được bỏ chọn và ngược lại

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

8

Làm thế nào nó hoạt động

Đầu tiên, xác định hàm

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

33 kiểm tra hoặc bỏ chọn tất cả các hộp kiểm có tên

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

34

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
label>
Code language: HTML, XML (xml)

9

Khi bạn nhấp vào nút, nó sẽ kiểm tra tất cả các hộp kiểm. Và. Nếu bạn nhấp lại vào nút, nó sẽ bỏ chọn tất cả các hộp kiểm. Để thực hiện việc chuyển đổi này, bạn cần chỉ định lại trình xử lý sự kiện nhấp chuột bất cứ khi nào sự kiện nhấp chuột kích hoạt

Thứ hai, chọn nút

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

35 và gán chức năng

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

36 cho thuộc tính

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

37 của nút

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept label>
Code language: HTML, XML (xml)

0

Thứ ba, xác định hàm

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

36 kiểm tra tất cả các hộp kiểm

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept label>
Code language: HTML, XML (xml)

1

Cuối cùng, xác định hàm

<input type="checkbox" id="accept" name="accept" value="yes"> Accept
Code language: HTML, XML (xml)

39 để bỏ chọn tất cả các hộp kiểm

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept label>
Code language: HTML, XML (xml)

2

Thử nghiệm

Tạo các hộp kiểm động

Ví dụ sau đây cho thấy cách tạo hộp kiểm động bằng JavaScript

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept label>
Code language: HTML, XML (xml)

3

đầu ra

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept label>
Code language: HTML, XML (xml)

4

Làm thế nào nó hoạt động

Đầu tiên, xác định một mảng bao gồm ba chuỗi. Trong thực tế, bạn có thể có mảng xuất phát từ kết quả của lệnh gọi API

Làm cách nào để giữ hộp kiểm được chọn trong JavaScript?

Bạn cũng có thể sử dụng mã bên dưới để nhận tất cả các giá trị hộp kiểm đã chọn. .

tài liệu. getElementById('btn'). onclick = chức năng () {

var đánh dấuCheckbox = tài liệu. querySelectorAll('input[type="checkbox"]. đã kiểm tra');

cho (hộp kiểm var của hộp kiểm được đánh dấu) {

tài liệu. thân thể. nối thêm (hộp kiểm. giá trị + ' ');

.

Làm cách nào để xác thực hộp kiểm trong JavaScript?

Việc xác thực hộp kiểm trong javascript có thể được thực hiện bằng cách sử dụng thuộc tính được chọn của phần tử hộp kiểm . Thuộc tính này trả về true khi hộp kiểm được chọn. Phương thức addEventListener() có thể được sử dụng để áp dụng sự kiện thay đổi cho hộp kiểm để xác thực, bất cứ khi nào người dùng tương tác với hộp kiểm.

Làm cách nào để đặt hộp kiểm được chọn theo mặc định trong JavaScript?

Thuộc tính defaultChecked trả về giá trị mặc định của thuộc tính được kiểm tra . Thuộc tính này trả về true nếu hộp kiểm được chọn theo mặc định, nếu không, nó trả về false.

Làm cách nào để giữ nhiều hộp kiểm được chọn ngay cả sau khi làm mới trang?

Bước 6. trong khi chọn các hộp kiểm và gửi nút cập nhật, hàm save() sẽ được gọi và quá trình cập nhật sẽ được thực hiện. Bước7. Sau khi trang được làm mới, hàm load() sẽ giữ lại các giá trị hộp kiểm đã chọn .

programming javascript

Cách giữ hộp kiểm được chọn trong JavaScript

Tạo hộp kiểm HTML

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

Nhận giá trị hộp kiểm

Nhận giá trị của nhiều hộp kiểm đã chọn

Kiểm tra / Bỏ chọn tất cả các hộp kiểm

Tạo các hộp kiểm động

Làm cách nào để giữ hộp kiểm được chọn trong JavaScript?

Làm cách nào để xác thực hộp kiểm trong JavaScript?

Làm cách nào để đặt hộp kiểm được chọn theo mặc định trong JavaScript?

Làm cách nào để giữ nhiều hộp kiểm được chọn ngay cả sau khi làm mới trang?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội