Cách đặt giá trị cho hộp kiểm trong javascript

Trong JavaScript, việc nhận giá trị hộp kiểm mang lại sự dễ dàng cho người dùng khi xác nhận các tùy chọn đã chọn. Hơn nữa, trong trường hợp gửi một biểu mẫu quan trọng, việc nhận giá trị hộp kiểm sẽ hỗ trợ nhập thông tin chính xác. Ngoài ra, việc chọn nhiều tùy chọn cho một câu trả lời trong bài kiểm tra hoặc bảng câu hỏi và nhận giá trị của hộp kiểm sẽ giúp tìm ra giải pháp chính xác

Bài viết này sẽ hướng dẫn bạn lấy/tìm nạp các giá trị hộp kiểm trong JavaScript

Làm cách nào để Nhận/Tìm nạp Giá trị Hộp kiểm trong Javascript?

Để nhận giá trị hộp kiểm trong JavaScript, bạn có thể sử dụng

• • "tài liệu. phương thức querySelectorAll()”
  • "tài liệu. phương thức getElementById”

Bây giờ chúng ta sẽ đi qua từng phương pháp một

Phương pháp 1. Nhận giá trị hộp kiểm trong JavaScript bằng tài liệu. phương thức querySelectorAll()

Tài liệu. phương thức querySelectorAll()” trả về tất cả các phần tử khớp với bộ chọn CSS. Bạn cũng có thể sử dụng phương pháp này để chọn các giá trị hộp kiểm được chỉ định

cú pháp

tài liệu. querySelectorAll ( Bộ chọn CSS )

 
Ở đây, "Bộ chọn CSS" đề cập đến tên hộp kiểm được xác định trong tệp HTML.

Đi qua ví dụ sau để minh họa

Ví dụ

Trong bước đầu tiên, chúng tôi sẽ chỉ định thuộc tính “nhãn cho” chỉ định nhãn cho phần tử HTML đầu vào của biểu mẫu. Sau đó, chúng tôi sẽ thêm loại đầu vào “hộp kiểm” để sử dụng hộp kiểm làm đầu vào. Bây giờ, chúng ta sẽ gán “tên”, “giá trị” và “id” cho mỗi hộp kiểm. Cuối cùng, chúng tôi cũng sẽ bao gồm một nút để nhận giá trị hộp kiểm. Quá trình này sẽ được lặp lại cho mỗi trong ba hộp kiểm

< p > Chọn ngôn ngữ yêu thích của bạn p>
    <label for= "s1"> <input type= "checkbox" name= "language" value= "Python" id="s1">Pythonlabel>
    <label for= "s2"><input type= "checkbox" name= "language" value= "Java" id="s2">Javalabel>
    <label for= "s3"><input type= "checkbox" name= "language" value= "JavaScript" id="s3">JavaScriptlabel>
    <p>
        <button id= "button">Get Selected subjectbutton>
    p>

 
Trong bước tiếp theo, chúng tôi sẽ tìm nạp nút “id” bằng cách sử dụng “tài liệu. querySelector()” và thêm sự kiện “click” vào nút. Tiếp theo, bao gồm “tài liệu. querySelectorAll()” trong sự kiện nhấp chuột để chọn giá trị của các hộp kiểm được chỉ định. Cuối cùng, áp dụng phương thức “đẩy ()” để hiển thị giá trị của từng hộp kiểm đã chọn bằng cách sử dụng “tài liệu. viết phương pháp.

< tập lệnh >
      nút const button= document.querySelector('#button') ;
        button.addEventListener('click' , (event) => {
            let checkboxes= document.querySelectorAll('input[name="language"]. đã chọn') ;
              hãy . forEach= [];
            checkboxes.forEach(( hộp kiểm ) . đẩy > {
                output.push( hộp kiểm. value ) ;
            }) . ghi;
            document.write("Bạn đã chọn " , đầu ra );
        });    
    script>

 
Kết quả của việc triển khai ở trên sẽ dẫn đến.

Phương pháp 2. Nhận giá trị hộp kiểm trong JavaScript bằng tài liệu. Phương thức getElementById()

Tài liệu. getElementById()” trả về một phần tử có giá trị hoặc id được chỉ định. Nó cũng có thể được sử dụng để tìm nạp hộp kiểm “id” và trả về giá trị của từng hộp kiểm đã chọn

cú pháp

tài liệu. getElementById ( elementID )

 
Ở đây, “elementID” đề cập đến giá trị id của một phần tử có giá trị được chọn sẽ được tìm nạp.

Hãy đi qua ví dụ sau đây để chứng minh

Ví dụ

Firstly, we will specify the input type to “checkbox” and assign the “id”, “class”, and “value” to each checkbox as discussed in the previous method. We will contain these functionalities in a tag named table data “