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?

Question

Đố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)

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 để 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?
Làm cách nào để chọn hộp kiểm đã chọn trong js?

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ử

<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 là

<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à

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
Code language: HTML, XML (xml)

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

Xem ví dụ sau

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>



Code language: HTML, XML (xml)

trong ví dụ này

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

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

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

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
Code language: HTML, XML (xml)

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

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

8

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

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>

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

    <script>
        const checked = document.querySelector('#accept:checked') !== null;
        console.log(checked); // false
    script>

body>
html>
Code language: HTML, XML (xml)

Trong ví dụ này, selector

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
Code language: HTML, XML (xml)

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

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
Code language: HTML, XML (xml)

1 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" checked> Accept
Code language: HTML, XML (xml)

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

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
Code language: HTML, XML (xml)

1 được chọn, thì

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
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ị

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxtitle>
head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    script>

body>

html>
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

<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

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

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

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes"> Accept 
label>
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

<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

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

2 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

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes"> Accept 
label>
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

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

4

<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

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

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

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

6 cho thuộc tính

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

7 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

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

6 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

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

9 để 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 để 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'). 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. 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 đó (

Thực hiện thao tác bitwise với giá trị đó

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

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.

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?

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?

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

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