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 : javascript nhận giá trị của hộp kiểm
Tóm tắt < / strong>: 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 of hộp kiểm như sau:
Chấp nhận
& lt;
đầu vào
type
="checkbox"
id =
"chấp nhận"
& gt;Ngôn ngữ mã:
HTML, XML
(
xml
)
Một phương pháp hay là 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 tiếp cận. 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ủ đề javascript lấy giá trị của hộp kiểm
Bài 10.1: JavaScript (Truyền và gán giá trị cho thẻ Input)
- Tác giả: Tran Huong CNTT
- Ngày đăng: 2021-11-18
- Đánh giá: 4 ⭐ ( 5771 lượt đánh giá )
- Khớp với kết quả tìm kiếm: tranhuongCNTT tranhuong JavaScript ThiếtkếWeb Gọi_hàm_trong_JavaScript JavaScript_trong_thiết_kế_Web JavaScript_trongthiếtkếWeb Truyền_gán_giá_trị_HTML_JavaScript
CẢM ƠN TẤT CẢ QUÝ VỊ
"ĐĂNG KÝ" ỦNG HỘ KÊNH PHÁT TRIỂN
"LIKE" NẾU CẢM THẤY VIDEO HỮU ÍCH.
Lưu trữ và hiển thị các giá trị của hộp văn bản
- Tác giả: hiepsiit.com
- Đánh giá: 4 ⭐ ( 8422 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Lấy giá trị của Radio button checked bằng Javascript
- Tác giả: hoctapsgk.com
- Đánh giá: 4 ⭐ ( 7883 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Cho 2 Radio button có cùng tên là gender (giới tính) gồm hai giá trị là Nam và Nữ, hãy tạo ra một button và xử lý sự kiện khi click vào button đó thì in ra.
Làm cách nào để kiểm tra xem một hộp kiểm đã được chọn bằng JavaScript hay chưa?
- Tác giả: tech-wiki.online
- Đánh giá: 3 ⭐ ( 2388 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Lấy giá trị checkbox checked bằng Javascript
- Tác giả: freetuts.net
- Đánh giá: 4 ⭐ ( 8964 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Lấy thông tin về sở thích của người dùng, mỗi sở thích là một checkbox, nếu người dùng thích cái nào thì check vào cái đó. Hãy tạo ra một button khi click.
Làm sao để lấy giá trị của input trong JavaScript? - Blog
- Tác giả: vn.got-it.ai
- Đánh giá: 5 ⭐ ( 5200 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Có rất nhiều cách khác nhau để lấy giá trị của input trong JavaScript. Đây là kiến thức quan trọng với lập trình viên website. Cùng tìm hiểu bài viết với 3 cách lấy giá trị input đơn giản nhất.
Hộp thoại Alert, Confirm, Prompt trong Javascript
- Tác giả: openplanning.net
- Đánh giá: 5 ⭐ ( 1685 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
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