programming javascript

Làm cách nào để nhận giá trị hộp kiểm đã chọn trong JavaScript bằng cách sử dụng tên?

Đối với các hộp kiểm, nội dung của thuộc tính giá trị không xuất hiện trong giao diện người dùng. Thuộc tính giá trị chỉ có ý nghĩa khi gửi biểu mẫu. Nếu hộp kiểm ở trạng thái được chọn khi biểu mẫu được gửi, tên của hộp kiểm sẽ được gửi cùng với giá trị của thuộc tính giá trị [nếu hộp kiểm không được chọn thì không có thông tin nào được gửi]

Trong bài viết này, chúng ta sẽ thảo luận về cách chúng ta có thể lấy tất cả các giá trị đã chọn từ hộp kiểm đã chọn bằng HTML và javascript

Trước hết, chúng tôi sẽ tạo một số hộp kiểm và cung cấp cho chúng một số giá trị, bây giờ đối với phần javascript, chúng tôi sẽ tạo một hàm sẽ kiểm tra xem có hộp kiểm nào được chọn không, nếu vậy, chúng tôi sẽ in nó trên màn hình và nó sẽ hoạt động cho

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 giá trị hộp kiểm đã chọn theo tê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']. title = 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. cơ thể người. nối thêm [hộp kiểm. giá trị + ' '];

Làm cách nào để trả về giá trị hộp kiểm trong JavaScript?

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 để lấy ID của hộp kiểm trong JavaScript?

Kích hoạt chức năng OptionSelected[] Nhận ID của hộp kiểm đó. Thực hiện thao tác bitwise dựa trên ID đó. .

Kích hoạt chức năng OptionSelected[]

Tìm nạp số nguyên được gán cho hộp kiểm đó [

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 giá trị hộp kiểm đã chọn theo tên trong JavaScript?

Làm cách nào để trả về giá trị hộp kiểm trong JavaScript?

Làm cách nào để lấy ID của hộp kiểm trong JavaScript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề