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 và cách lấy giá trị của các hộp kiểm đã chọn.
Bạn đang xem : js nhận giá trị hộp kiểm
Tóm tắt : 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, nhận 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 một hộp kiểm, bạn sử dụng phần tử & lt; input & gt; với type của hộp kiểm như sau:
Chấp nhận
& lt;
input < / p>
type
="checkbox"
id =
"chấp nhận"
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Bạn luôn kết hợp 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 thực hiện việc này, việc nhấp vào nhãn cũng sẽ chọn hoặc bỏ chọn hộp kiểm.
& lt;
nhãn
cho
=" accept "
& gt;& lt;
input
type
=" hộp kiểm "
id
=" accept "
name
=" accept "
value
=" có "
& gt; Chấp nhận& lt; /
nhãn
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Hoặc:
< code class = "hljs language-xml">
& lt;
input
type =
"hộp kiểm"
id
="accept" < / p>
name
="accept"
value =
"có"
& gt;& lt;
label
cho
=" accept "
& gt; Chấp nhận& lt; /
nhãn
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Lưu ý rằng thuộc tính for giá trị của nhãn phải khớp với id của hộp kiểm.
Các cách sau hoạt động nhưng không hợp lệ nên bạn nên tránh:
Chấp nhận
& lt;
input
type
="hộp kiểm"
id
="chấp nhận "
name
=" accept "
value < / p> =
"yes"
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Kiểm tra xem hộp kiểm có được chọn hay không
Một hộp kiểm có hai trạng thái: đã chọn và bỏ chọn.
Để có được trạng thái của hộp kiểm, bạn làm theo các bước sau:
- Đầu tiên, hãy chọn hộp kiểm bằng cách sử dụng phương thức DOM, chẳng hạn như
getElementById ()hoặcquerySelector (). - Sau đó, truy cập vào
đã chọnthuộc tính của phần tử hộp kiểm. Nếu thuộc tínhcheckcủa nó làtrue, thì hộp kiểm sẽ được chọn; nếu không thì không.
Xem ví dụ sau:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
="width = device-width, initial-scale = 1.0"
& gt;& lt;
title
& gt; Hộp kiểm JavaScript& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
label
cho
=" accept "
& gt;& lt;
input
type
=" hộp kiểm "
id
=" accept "
name
=" accept "
value
=" có "
& gt; Chấp nhận& lt; /
nhãn
& gt;& lt;
script
& gt;
const
cb =document
.querySelector ('# accept' < / p>);
console
.log (cb.checked);& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Trong ví dụ này:
Đầu tiên, hãy tạo phần tử hộp kiểm HTML:
& lt;
nhãn
cho
="chấp nhận"
& gt;& lt;
input
type
=" hộp kiểm "
id
=" accept "
name
=" accept "
value
=" có "
& gt; Chấp nhận& lt; /
nhãn
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Thứ hai, chọn hộp kiểm có id #accept và kiểm tra đã kiểm tra thuộc tính :
const cb =
document
.querySelector ('# accept'
);console
.log (cb.checked);Ngôn ngữ mã:
JavaScript
(
javascript
)
Vì hộp kiểm không được chọn, bạn sẽ thấy false trong bảng điều khiển:
false
Ngôn ngữ mã:
JavaScript
(
javascript
)
Hãy xem xét một ví dụ khác:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
=" width = device-width, initial-scale = 1.0 "< / p> & gt;
& lt;
title
& gt; Hộp kiểm JavaScript& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
label
cho
=" accept "
& gt;& lt;
input
type
=" hộp kiểm "
id
=" accept "
name
=" accept "
value
=" có "
& gt; Chấp nhận& lt; /
nhãn
& gt;& lt;
script
& gt;
const
checks =document
.querySelector ('# accept: đã kiểm tra '
)! ==null
;console
.log (đã chọn);& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Trong ví dụ này, bộ chọn #accept: check chọn phần tử có id #accept và đã kiểm tra thuộc tính . Ví dụ: nó khớp với phần tử sau:
=
& lt ;
input
type
="checkbox"
< p class = "hljs-attr"> id"accept"
đã kiểm tra
& gt; < / p> Chấp nhậnNgôn ngữ mã:
HTML, XML
(
xml
)
Nhưng không cái này:
Chấp nhận
& lt;
input
type
=" hộp kiểm "
id
=" accept "
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Do đó, nếu phần tử hộp kiểm có id #accept được chọn, document.querySelector () sẽ trả về. Trên cửa sổ bảng điều khiển, bạn sẽ thấy giá trị false vì hộp kiểm không được chọn:
false
Ngôn ngữ mã:
JavaScript
(
javascript
)
Nhận các giá trị hộp kiểm
Trang sau hiển thị một hộp kiểm và một nút. Khi 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:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
=" width = device-width, initial-scale = 1.0 "< / p> & gt;
& lt;
title
& gt; Hộp kiểm JavaScript& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
label
cho
=" accept "
& gt;& lt;
input
type
=" hộp kiểm "
id
=" accept "
name
=" accept "
& gt; Chấp nhận& lt; /
nhãn
& gt; Nút& lt;
id
=" btn "
& gt; Gửi nút& lt; /
& gt;
& lt;
script
& gt;
const
cb =document
.querySelector ('# accept' < / p>);
const
btn =document
.querySelector ('# btn' < / p>); btn.onclick =
()
= & gt; { cảnh báo (cb.value); };& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Khi bạn nhận thuộc tính value của một hộp kiểm, bạn luôn nhận được chuỗi 'on' cho dù hộp kiểm đượ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:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
=" width = device-width, initial-scale = 1.0 "< / p> & gt;
& lt;
title
& gt; Hộp kiểm JavaScript& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
p
& gt; Chọn màu sắc yêu thích của bạn:& lt; /
p
& gt;& lt;
label
cho
=" c1 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" red "
id
=" c1 "
& gt; Đỏ& lt; /
nhãn
& gt;& lt;
label
cho
=" c2 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" green "
id
=" c2 "
& gt; Màu xanh lá cây& lt; /
nhãn
& gt;& lt;
label
cho
=" c3 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" blue "
id
=" c3 "
& gt; Màu xanh lam& lt; /
nhãn
& gt;& lt;
p
& gt; Nút& lt;
id
=" btn "
& gt; Nhận Màu đã Chọn& lt; /
nút
& gt; < / p>& lt; /
p
& gt;& lt;
script
& gt;
const
btn =document
.querySelector ('# btn' < / p>); btn.addEventListener (
'click'
, (event) = & gt; {let
checkboxes =document
.querySelectorAll ('input [name = "color"]: đã kiểm tra '
);let
values = []; checkboxes.forEach ((
checkbox
) = & gt; { value.push (checkbox.value); }); alert (giá trị); });& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Cách hoạt động.
Trong HTML, chúng tôi tạo ba phần tử hộp kiểm với cùng tên (màu) nhưng có giá trị khác biệt:
& lt ;
nhãn
cho
="c1"
& gt;& lt ;
input
type
="checkbox"
< p class = "hljs-attr"> name ="color"
value
="red"
id
="c1"
& gt; Nhãn& lt; /
màu đỏ
& gt;& lt;
label
cho
=" c2 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" green "
id
=" c2 "
& gt; Màu xanh lá cây& lt; /
nhãn
& gt;& lt;
label
cho
=" c3 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" blue "
id
=" c3 "
& gt; Màu xanh lam& lt; /
nhãn
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
) < / p>
Trong JavaScript:
Đầu tiên, thêm trình xử lý sự kiện nhấp chuột vào nút:
const
btn =document
.querySelector ('#btn'
); btn.addEventListener ('click'
, (event) = & gt; { });Ngôn ngữ mã:
JavaScript
(
javascript
)
Thứ hai, chọn các hộp kiểm đã chọn bằng cách sử dụng Phương thức document.querySelectorAll () bên trong trình xử lý sự kiện nhấp chuột:
checkboxes =
< p class = "hljs-keyword"> letdocument
.querySelectorAll ('input [name = " color "]: đã kiểm tra '
);Ngôn ngữ mã:
JavaScript
(
javascript
)
Thứ ba, đẩy giá trị của các hộp kiểm đã chọn vào một mảng:
{ value.push (checkbox.value); }); alert (giá trị);
let
va lues = []; checkboxes.forEach ((
checkbox
) = & gt;Ngôn ngữ mã:
JavaScript
(
javascript
)
Bản trình diễn: < / p>
Chọn / 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:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
=" width = device-width, initial-scale = 1.0 "< / p> & gt;
& lt;
title
& gt; JavaScript Đánh dấu / bỏ chọn hộp kiểm& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
p
& gt; Nút& lt;
id
=" btn "
& gt; Chọn / Bỏ chọn Tất cả nút& lt; /
& gt;
& lt; /
p
& gt;& lt;
nhãn
cho
="c1"
& gt;& lt ;
input
type
="checkbox"
< p class = "hljs-attr"> name ="color"
value
="red"
id
="c1"
& gt; Nhãn& lt; /
màu đỏ
& gt;& lt;
label
cho
=" c2 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" green "
id
=" c2 "
& gt; Màu xanh lá cây& lt; /
nhãn
& gt;& lt;
label
cho
=" c3 "
& gt;& lt;
input
type
=" checkbox "
name
=" color "
value
=" blue "
id
=" c3 "
& gt; Màu xanh lam& lt; /
nhãn
& gt;& lt;
script
& gt;
function
kiểm tra
(đã kiểm tra = true
) {const
checkboxes =document
.querySelectorAll ('input [name = "màu"] '
); checkboxes.forEach ((
checkbox
) = & gt; { checkbox.checked = đã kiểm tra; }); }
function
checkAll
() { lựa chọn();
this
.onclick = uncheckAll; }
function
Bỏ chọnAll
() { select (
false
);this
.onclick = checkAll; }const
btn =document
.querySelector ('# btn' < / p>); btn.onclick = checkAll;
& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Cách hoạt động:
Đầu tiên, hãy xác định
check () < / code> chức năng kiểm tra hoặc bỏ chọn tất cả các hộp kiểm có tên"color":{
function
kiểm tra
(check = true
)const
checkboxes =document
.querySelectorAll ('input [name = "màu"] '
); checkboxes.forEach ((
checkbox
) = & gt; { checkbox.checked = đã kiểm tra; }); }Ngôn ngữ mã:
JavaScript
(
javascript
)
Khi bạn nhấp vào nút, nó đã chọn 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 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
#btnvà gáncheckAll () < / code> hàm thuộc tínhonclickcủa nút:btn =
< p class = "hljs-keyword"> constdocument
.querySelector ('# btn' ); btn.onclick = checkAll;
Ngôn ngữ mã:
JavaScript
(
javascript
)
Thứ ba, xác định hàm
checkAll ()kiểm tra tất cả các hộp kiểm:{ kiểm tra();
chức năng
checkAll
()
this
.onclick = uncheckAll; }Ngôn ngữ mã:
JavaScript
(
javascript
)
Cuối cùng, xác định
Bỏ chọn tất cả ()hàm bỏ chọn tất cả các hộp kiểm:
function
Bỏ chọnAll
() < / p> { check (
false
);this
.onclick = checkAll; }Ngôn ngữ mã:
JavaScript
(
javascript
)
Demo:
< p class = "output">
Tạo động các hộp kiểm
Ví dụ sau cho thấy cách tạo động các hộp kiểm bằng JavaScript:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
=" width = device-width, initial-scale = 1.0 "< / p> & gt;
& lt;
title
& gt; Hộp kiểm JavaScript& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
div
id
=" root "
& gt;& lt; /
div
& gt;& lt;
script
& gt;
const
color = ["Red"
,"Green" < / p>,
"Xanh lam"
]; color.forEach ((
color
) = & gt; {const
id =`color-
$ {color}
` < / p>;const
label =document
.createElement ('label' ); label.setAttribute (
"for"
, id);const
checkbox =document
.createElement ('input' ); checkbox.type =
"hộp kiểm"
; checkbox.name ="color"
; checkbox.value = color; checkbox.id = id; label.appendChild (hộp kiểm); label.appendChild (document
.createTextNode (color));document
.querySelector ("# root"
) .appendChild (nhãn); });& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Đầu ra:
< code class = "hljs language-xml">
& lt;
div
class =
"output-cont"
& gt;& lt;
div
class
="output"
& gt;& lt;
iframe
height
=" 250px "
src
=" https://www.javascripttutorial.net/sample/dom /checkbox/checkbox-dynamic.html"
>& lt; /
iframe
& gt; < / p>& lt; /
div
& gt;& lt; /
div
& gt;Ngôn ngữ mã:
HTML, XML
(
< p class = "shcb-language__slug"> xml)
Cách hoạt động.
Trước tiên, hãy xác định một mảng bao gồm ba chuỗi. Trên thực tế, bạn có thể có mảng đến từ kết quả của lệnh gọi API:
const
color = ["Red"
,"Green" ,
"Blue"
];Ngôn ngữ mã:
JavaScript
(
javascript
)
Thứ hai, hãy lặp lại các phần tử của mảng và:
1) Tạo một id duy nhất cho mỗi hộp kiểm:
;
const
id =` color- < p class = "hljs-subst"> $ {color}
`Ngôn ngữ mã:
JavaScript
(
javascript
< p class = "shcb-language__paren">)2) Tạo nhãn và gán id cho thuộc tính for:
const
label =document
.createElement ('nhãn'
); label.setAttribute ("for"
, id);Ngôn ngữ mã:
JavaScript
(
javascript
)
3) Tạo hộp kiểm:
const
checkbox =document
.createElement ('input '
); checkbox.type ="hộp kiểm"
; checkbox.name ="color"
; checkbox.value = color; checkbox.id = id;Ngôn ngữ mã:
JavaScript
(
javascript
)
4) Đặt hộp kiểm bên trong nhãn:
label
. appendChild
(hộp kiểm
);Ngôn ngữ mã:
CSS
(
css
)
5) Tạo một nút văn bản và nối nó vào nhãn:
nhãn
. appendChild
(document
. createTextNode (
color
));Ngôn ngữ mã:
CSS
(
css
)
6) Thêm nhãn vào phần tử gốc:
document
. querySelector
("# root
"). appendChild
(label
); < / code>Ngôn ngữ mã:
CSS
(
css
)
Ví dụ sau cũng tạo động các hộp kiểm như ví dụ trên:
& lt;
html
lang
=" vi "
& gt;& lt;
head
& gt;& lt;
meta
bộ ký tự
=" UTF-8 "
& gt;& lt;
meta
name
=" viewport "
content
=" width = device-width, initial-scale = 1.0 "< / p> & gt;
& lt;
title
& gt; Hộp kiểm JavaScript& lt; /
title
& gt;& lt; /
head
& gt;& lt;
body
& gt;& lt;
div
id
=" root "
& gt;& lt; /
div
& gt;& lt;
script
& gt;
const
color = ["Red"
,"Green" < / p>,
"Xanh lam"
];const
html = Colors.map (
color
= & gt; < / p>`& lt; label for =" color-
$ {color}
"& gt; & lt; input type = "checkbox" name = "color" id = "color-$ {color}
" value = "$ {color}
"& gt;$ {color}
& lt; / label & gt; ` ) .join (''
);document
.querySelector ("# root"
) .innerHTML = html;& lt; /
script
& gt;& lt; /
body
& gt;& lt; /
html
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Trong ví dụ này:
- Đầu tiên, tạo nhãn và phần tử hộp kiểm bằng cách sử dụng phương thức Array
map ()và các chữ mẫu . - Thứ hai, nối các chuỗi HTML thành một HTML duy nhất bằng cách sử dụng phương thức String
join (). - Thứ ba, nối HTML vào phần tử
#root.
Tóm tắt
- Sử dụng phần tử
& lt; input & gt;với loạihộp kiểmđể tạo phần tử hộp kiểm. - Vị trí hộp kiểm bên trong phần tử nhãn để cải thiện tính khả dụng và khả năng truy cập.
- Sử dụng thuộc tính
checkbox.checkedhoặc công cụ chọn: checkđể kiểm tra xem hộp kiểm có được chọn không . - Nhận giá trị
< / code> thuộc tính để nhận giá trị của hộp kiểm.
Hướng dẫn này có hữu ích không?
< / p>
Xem thêm những thông tin liên quan đến chủ đề js nhận giá trị hộp kiểm
How to Get Value of Multiple Selected Checkbox with Same Name in JavaScript
- Tác giả: SouthBridge
- Ngày đăng: 2021-10-08
- Đánh giá: 4 ⭐ ( 3733 lượt đánh giá )
- Khớp với kết quả tìm kiếm: In this video you will learn how to get value(s) of Multiple Selected Checkbox with the same name using the JavaScript programming language.
- JavaScript Tutorial
- Checkbox
Phương pháp Hiển thị / Xuất dữ liệu trong Javascript
- Tác giả: hanoiict.edu.vn
- Đánh giá: 4 ⭐ ( 9649 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học lập trình Javascript này, bạn sẽ tìm hiểu cách hiển thị / xuất dữ liệu ra, cách in ra màn hình console, tạo thông báo hay in kết quả ra màn hình trong JavaScript... Tại sao phải hiển thị dữ liệu? Trong khi lập trình, có một số tình huống nhất định có thể cần phải hiển thị dữ liệu,
Javascript check is a number – 3 cách kiểm tra
- Tác giả: topdev.vn
- Đánh giá: 3 ⭐ ( 6908 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Làm việc với Javascript nhiều, vấn đề các bạn thường gặp là kiểm tra xem một object có phải là number hay không? (Javascript check is a number or not?).
Kiểm Tra Trạng Thái Của Checkbox Input với jQuery và JavaScript Thuần
- Tác giả: www.codehub.com.vn
- Đánh giá: 5 ⭐ ( 6847 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Kiểm tra xem một ô checkbox đang được tích chọn hay không là một công việc khá phổ biến khi chúng ta làm việc với phần frontend của ứng dụng web. Trong bài viết này chúng ta sẽ tìm hiểu cách thực hiện công...
JavaScript kiểm tra Form: nhanh chóng và dễ dàng!
- Tác giả: nphunghung.com
- Đánh giá: 4 ⭐ ( 9796 lượt đánh giá )
- Khớp với kết quả tìm kiếm: JavaScript kiểm tra Form: nhanh chóng và dễ dàng! - Nguyễn Phùng Hưng Blog - Chia sẻ đam mê. Sử dụng JavaScript phía máy khách là một cách hiệu quả để xác thực đầu vào người sử dụng nhập trong các form. Khi có nhiều trường trong form thì xác thực b
JAVASCRIPT: cách nhận nhiều giá trị hộp kiểm từ biểu mẫu html
- Tác giả: vi.fmihm.org
- Đánh giá: 5 ⭐ ( 2310 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Tôi hiểu rằng tôi có thể sử dụng jQuery (cách nhận nhiều giá trị hộp kiểm bằng cách sử dụng jquery) để nhận các giá trị hộp kiểm khi có nhiều hộp kiểm, nhưng các đầu vào hộp kiểm của tôi nằm trong một biểu mẫu html, vì vậy những jQuery đó
Các cách nhận dữ liệu đầu vào trong JavaScript
- Tác giả: hocjavascript.net
- Đánh giá: 3 ⭐ ( 6801 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta cùng tìm hiểu về các cách nhận dữ liệu đầu vào trong JavaScript nhé! JavaScript có thể nhận dữ liệu đầu vào từ người
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình