programming javascript

Làm cách nào để gửi biểu mẫu khi hộp kiểm được chọn trong JavaScript?

Hộp kiểm là hộp lựa chọn cho phép người dùng đưa ra lựa chọn nhị phân [đúng hoặc sai] bằng cách kiểm tra và bỏ chọn hộp kiểm đó. Về cơ bản, hộp kiểm là một biểu tượng, thường được sử dụng trong các biểu mẫu và ứng dụng GUI để nhận một hoặc nhiều đầu vào từ người dùng

Nếu một hộp kiểm được đánh dấu hoặc kiểm tra, nó cho biết là đúng;
Nếu một hộp kiểm không được đánh dấu hoặc không được kiểm tra, hộp kiểm đó có nghĩa là sai;

Hãy nhớ rằng hộp kiểm khác với nút radio và danh sách thả xuống vì nó cho phép nhiều lựa chọn cùng một lúc. Ngược lại, nút radio và trình đơn thả xuống cho phép chúng tôi chỉ chọn một trong số các tùy chọn đã cho

Trong chương này, bây giờ chúng ta sẽ xem cách lấy tất cả giá trị hộp kiểm đã đánh dấu bằng JavaScript

Tạo cú pháp hộp kiểm

Để tạo hộp kiểm, hãy sử dụng tab HTML và nhập = "hộp kiểm" bên trong tab như hình bên dưới -

Mặc dù bạn cũng có thể tạo hộp kiểm bằng cách tạo đối tượng hộp kiểm thông qua JavaScript, nhưng phương pháp này hơi phức tạp. Chúng ta sẽ thảo luận về cả hai cách tiếp cận sau-

ví dụ

Tạo và nhận giá trị hộp kiểm

Trong ví dụ này, chúng tôi sẽ tạo hai hộp kiểm nhưng với điều kiện là người dùng sẽ chỉ phải đánh dấu một hộp kiểm giữa chúng. Sau đó, chúng tôi sẽ lấy giá trị của hộp kiểm được đánh dấu. Xem mã dưới đây

sao chép mã

Kiểm tra nó ngay bây giờ

đầu ra

Nếu bạn đánh dấu vào ô Có và sau đó nhấp vào nút Gửi, một thông báo sẽ hiển thị như hình bên dưới

Nếu bạn nhấp vào nút Gửi mà không đánh dấu bất kỳ hộp kiểm nào, một thông báo lỗi sẽ được hiển thị

Tương tự, bạn có thể kiểm tra đầu ra cho các điều kiện khác

Nhận tất cả giá trị hộp kiểm

Bây giờ, bạn sẽ thấy cách lấy tất cả các giá trị hộp kiểm do người dùng đánh dấu. Xem ví dụ bên dưới

sao chép mã

Kiểm tra nó ngay bây giờ

đầu ra

Bằng cách thực thi mã này, chúng tôi sẽ nhận được phản hồi như ảnh chụp màn hình bên dưới có một số ngôn ngữ lập trình mà bạn có thể chọn ngôn ngữ mà bạn biết

Tại đây, bạn bấm vào nút Check all, nó sẽ đánh dấu tất cả các ô ngôn ngữ lập trình. Sau đó, nhấp vào nút Gửi để nhận phản hồi

Mặc dù bạn có thể chọn từng ngôn ngữ bằng cách đánh dấu vào từng hộp kiểm rồi nhấp vào nút Gửi để nhận kết quả

đầu ra. Khi bạn chưa chọn gì

Nhận tất cả giá trị hộp kiểm được đánh dấu bằng phương thức querySelectorAll[]

Có một phương pháp khác để lấy tất cả các giá trị đã chọn từ các hộp kiểm do người dùng đánh dấu. Bây giờ bạn sẽ thấy cách lấy giá trị của tất cả các hộp kiểm bằng phương thức querySelectorAll[] do người dùng đánh dấu. Thao tác này sẽ tìm nạp các giá trị hộp kiểm từ biểu mẫu HTML và hiển thị kết quả

Nhận tất cả giá trị hộp kiểm

Bây giờ, bạn sẽ thấy cách lấy tất cả các giá trị hộp kiểm do người dùng đánh dấu. Xem ví dụ bên dưới

sao chép mã

Kiểm tra nó ngay bây giờ

đầu ra

Tại đây, bạn có thể thấy rằng tất cả giá trị hộp kiểm được đánh dấu đã được trả lại

Các mã JavaScript khác nhau để nhận giá trị hộp kiểm được đánh dấu

Mã JavaScript để nhận tất cả các giá trị hộp kiểm đã chọn

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

Vì vậy, các phần tử hộp kiểm cho phép đa lựa chọn. Điều này có nghĩa là người dùng có thể chọn một hoặc nhiều tùy chọn theo lựa chọn của họ được xác định trong biểu mẫu HTML. Thậm chí bạn có thể chọn tất cả các hộp kiểm. Trong ví dụ trên, bạn đã thấy rằng

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

Tạo hộp kiểm HTML

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

 Accept
Code language: HTML, XML [xml]

3 với

 Accept
Code language: HTML, XML [xml]

4 của

 Accept
Code language: HTML, XML [xml]

5 như sau

 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


     Accept 
Code language: HTML, XML [xml]

Hoặc là

  
 Accept 
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ó

 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ư
```
 Accept
Code language: HTML, XML [xml]
```
6 hoặc
```
 Accept
Code language: HTML, XML [xml]
```
7

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

 Accept
Code language: HTML, XML [xml]

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

 Accept
Code language: HTML, XML [xml]

8 của nó là





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

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

Xem ví dụ sau





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

trong ví dụ này

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


    Accept 
Code language: HTML, XML [xml]

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





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

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

 Accept
Code language: HTML, XML [xml]

const cb = document.querySelector['#accept'];
console.log[cb.checked];
Code language: JavaScript [javascript]

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





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

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

false
Code language: JavaScript [javascript]

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




    
    
    JavaScript Checkbox



    
         Accept
    

    
        const checked = document.querySelector['#accept:checked'] !== null;
        console.log[checked]; // false
    


Code language: HTML, XML [xml]

Trong ví dụ này, selector





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

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





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    




  
Code language: HTML, XML [xml]

1 và có thuộc tính

 Accept
Code language: HTML, XML [xml]

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

 Accept
Code language: HTML, XML [xml]

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


     Accept 
Code language: HTML, XML [xml]

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





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

1 được chọn, thì





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

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





    
    
    JavaScript Checkbox


    
         Accept
    

    
        const cb = document.querySelector['#accept'];
        console.log[cb.checked]; // false
    



Code language: HTML, XML [xml]

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

false
Code language: JavaScript [javascript]

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


     Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

1 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


     Accept 
Code language: HTML, XML [xml]

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


     Accept 
Code language: HTML, XML [xml]

trong JavaScript

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


     Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

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


     Accept 
Code language: HTML, XML [xml]

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


     Accept 
Code language: HTML, XML [xml]

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


     Accept 
Code language: HTML, XML [xml]

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

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


    Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]


     Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

6 cho thuộc tính


    Accept 
Code language: HTML, XML [xml]

7 của nút

  
 Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

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

  
 Accept 
Code language: HTML, XML [xml]

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


    Accept 
Code language: HTML, XML [xml]

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

  
 Accept 
Code language: HTML, XML [xml]

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

  
 Accept 
Code language: HTML, XML [xml]

đầu ra

  
 Accept 
Code language: HTML, XML [xml]

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 để nhận nếu hộp kiểm được chọn trong JavaScript?

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ách nhận giá trị hộp kiểm khi gửi biểu mẫu?

Thuộc tính giá trị hộp kiểm đầu vào .

Trả về giá trị của thuộc tính giá trị của hộp kiểm. getElementById["myCheck"]. giá trị;

Thay đổi giá trị được liên kết với hộp kiểm. getElementById["myCheck"]. value = "newCheckboxValue";

Gửi biểu mẫu - cách thay đổi giá trị được liên kết với hộp kiểm. getElementById["myCheck"]

Làm cách nào để viết nếu điều kiện cho hộp kiểm trong JavaScript?

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

Đầu tiên, chọn hộp kiểm bằng phương thức DOM, chẳng hạn như getElementById[] hoặc querySelector[]

Sau đó, truy cập thuộc tính đã chọn của phần tử hộp kiểm. Nếu thuộc tính được chọn của nó là true , thì hộp kiểm được chọn;

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

Trả lời. Sử dụng phương thức chuyển đổi jQuery[] . Các hộp div trong ví dụ được ẩn theo mặc định bằng cách sử dụng thuộc tính hiển thị CSS có giá trị được đặt thành không.

Tạo cú pháp hộp kiểm

ví dụ

Tạo và nhận giá trị hộp kiểm

Nhận tất cả giá trị hộp kiểm

Nhận tất cả giá trị hộp kiểm được đánh dấu bằng phương thức querySelectorAll[]

Nhận tất cả giá trị hộp kiểm

Các mã JavaScript khác nhau để nhận giá trị hộp kiểm được đánh dấu

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 để nhận nếu hộp kiểm được chọn trong JavaScript?

Cách nhận giá trị hộp kiểm khi gửi biểu mẫu?

Làm cách nào để viết nếu điều kiện cho hộp kiểm trong JavaScript?

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

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề