Cách Kiểm tra Nếu một Hộp kiểm được Kiểm tra bằng jQuery – kiểm tra xem hộp kiểm đã được chọn chưa

Trong hướng dẫn này, bạn sẽ tìm thấy một số phương thức jQuery được sử dụng để kiểm tra xem hộp kiểm có được chọn dựa trên các phiên bản khác nhau mà bạn sử dụng hay không.

Bạn đang xem : kiểm tra xem hộp kiểm có được chọn hay không

Hướng dẫn này bao gồm một số phương pháp sẽ kiểm tra xem hộp kiểm có được chọn hay không. Tất cả các phương pháp đều thực hiện giống nhau, nhưng các phương pháp khác nhau tùy thuộc vào phiên bản jQuery mà bạn sử dụng.

Hãy xem xét ví dụ sau và xem cách kiểm tra hộp kiểm được chọn bằng cách sử dụng các phiên bản jQuery khác nhau:

  

& lt; input id =

" hộp kiểm "

type =

" hộp kiểm "

name =

" một "

value =

"1"

đã kiểm tra =

"đã kiểm tra"

& gt;

& lt; input id =

"checkbox2"

type =

"checkbox" name =

"hai"

value =

"2"

& gt;

& lt; input id =

"checkbox3"

type =

"checkbox" name =

"thr"

value =

"3"

& gt;

< / pre>

jQuery 1.6 hoặc mới hơn

Để kiểm tra thuộc tính hộp kiểm của một phần tử, phương thức prop () được khuyến nghị:

  $ ('# checkbox'). prop ('đã kiểm tra'); // Boolean true  

Ví dụ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://code.jquery.com/jquery-3.5.0.min.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

input

id

=

" checkbox1 "

type

=

" checkbox "

name

=

" one "

value

=

" 1 "

& gt;

& lt;

input

id

=

" checkbox2 "

type

=

" checkbox "

tên

=

" hai "

giá trị

=

" 2 "

& gt;

& lt;

input

id

=

" checkbox3 "

type

=

" checkbox "

name

=

" thr "

value

=

" 3 "

& gt;

& lt;

script

& gt;

$ (

document

) .ready (

function

(

)

{ $ (

'input [type = "checkbox"]'

) .click (

hàm

(

)

{

if

($ (

this

) .prop (

"đã kiểm tra"

) ==

true

) { alert (

"Hộp kiểm được chọn."

); }

else

if

($ (

this

). prop (

"đã kiểm tra"

) ==

false

) { alert (

"Hộp kiểm không được chọn."

); } }); });

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Phương thức thứ hai là phương thức is (), giúp mã dễ đọc hơn (ví dụ: trong câu lệnh if):

  $ ('# checkbox'). is (': check'); // Boolean true  

Ví dụ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://code.jquery.com/jquery-3.5.0.min.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

input

id

=

" checkbox1 "

type

=

" checkbox "

name

=

" one "

value

=

" 1 "

& gt;

& lt;

input

id

=

" checkbox2 "

type

=

" checkbox "

tên

=

" hai "

giá trị

=

" 2 "

& gt;

& lt;

input

id

=

" checkbox3 "

type

=

" checkbox "

name

=

" thr "

value

=

" 3 "

& gt;

& lt;

script

& gt;

$ (

document

) .ready (

function

(

)

{ $ (

'input [type = "checkbox"]'

) .click (

hàm

(

)

{

if

($ (

this

) .is (

": đã kiểm tra "

)) { alert (

"Hộp kiểm được chọn."

); }

else

if

($ (

this

). là (

": not (: check)"

)) { alert (

"Hộp kiểm không được chọn."

); } }); });

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Phương thức thứ ba sử dụng phương thức length () và size ():

  $ ('# checkbox: check'). length; // Số nguyên & gt; 0
$ ('# hộp kiểm: đã kiểm tra'). size (); // .size () có thể được sử dụng thay cho .length  

Ví dụ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://code.jquery.com/jquery-3.5.0.min.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

id

=

" checkList "

& gt;

& lt;

input

id

=

" checkbox1 "

type

=

" checkbox "

name

=

" one "

value

=

" 1 "

/ & gt;

& lt;

input

id

=

" checkbox2 "

type

=

" checkbox "

tên

=

" hai "

giá trị

=

" 2 "

/ & gt;

& lt;

input

id

=

"checkbox3"

type

=

"checkbox"

name

=

"thr"

value

=

"3"

/ & gt;

& lt; /

div

& gt;

& lt;

input

type

=

" button "

id

=

" btnCheck "

value

=

" Kiểm tra "

/ & gt;

& lt;

script

type

=

" text / javascript "

& gt;

$ (

function

(

)

{ $ (

"# btnCheck"

) .click (

function

(

)

{

let

checks = $ (

"# checkList input [type = checkbox]: đã kiểm tra"

) .chiều dài;

if

(đã chọn & gt;

0

) { alert (đã kiểm tra +

"CheckBoxe (các) đã được kiểm tra."

);

return

true

; }

khác

{ alert (

"Vui lòng chọn CheckBoxe (s)."

);

return

false

; } }); });

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Phương pháp thứ tư là lấy tham chiếu đối tượng DOM :

  $ ('# checkbox'). get (0) .checked; // Boolean true
$ ('# hộp kiểm') [0] .checked; // Boolean true  

Ví dụ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://code.jquery.com/jquery-3.5.0.min.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

id

=

" checkList "

& gt;

& lt;

input

id

=

" checkbox1 "

type

=

" checkbox "

name

=

" one "

value

=

" 1 "

/ & gt;

& lt; /

div

& gt;

& lt;

input

type

=

" button "

id

=

" btnCheck "

value

=

" Kiểm tra "

/ & gt;

& lt;

input

type

=

" button "

id

=

" btnUnCheck "

value

=

" Bỏ chọn "

/ & gt;

& lt;

script

& gt;

$ (

'# btnCheck'

) .on (

'click'

,

function

(

)

{ $ (

'# checkbox1'

) .get (

0

) .checked =

true

; }); $ (

'# btnUnCheck'

) .on (

'click'

,

function

(

)

{ $ (

'# checkbox1'

) .get (

0

) .checked =

sai

; });

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://code.jquery.com/jquery-3.5.0.min.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

id

=

" checkList "

& gt;

& lt;

input

id

=

" checkbox1 "

type

=

" checkbox "

name

=

" one "

value

=

" 1 "

/ & gt;

& lt;

input

id

=

" checkbox2 "

type

=

" checkbox "

tên

=

" hai "

giá trị

=

" 2 "

/ & gt;

& lt;

input

id

=

" checkbox3 "

type

=

" checkbox "

name

=

" thr "

value

=

" 3 "

/ & gt;

& lt; /

div

& gt;

& lt;

input

type

=

" button "

id

=

" btnCheck "

value

=

" Kiểm tra "

/ & gt;

& lt;

input

type

=

" button "

id

=

" btnUnCheck "

value

=

" Bỏ chọn "

/ & gt;

& lt;

script

& gt;

$ (

'# btnCheck'

) .on (

'click'

,

function

(

)

{ $ (

'input'

) [

0

] .checked =

sự thật

; }); $ (

'# btnUnCheck'

) .on (

'click'

,

function

(

)

{ $ (

'input'

) [

0

] .checked =

sai

; });

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Phiên bản dưới 1.6

Trong trường hợp phiên bản lên đến 1.5, bạn nên sử dụng phương thức .attr () thay vì prop ():

  $ ('# checkbox'). attr ('đã kiểm tra'); // Boolean true  

Ví dụ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

input

type

=

" hộp kiểm "

id

=

"hộp kiểm"

đã kiểm tra

=

"đã kiểm tra"

/ & gt;

& lt;

div

id

=

" mydiv "

& gt;

& lt;

input

type

=

" hộp kiểm "

id

=

" Bỏ chọn "

/ & gt;

& lt; /

div

& gt;

& lt;

script

& gt;

$ (

"# hộp kiểm"

) .attr (

"đã kiểm tra"

)? alert (

"Đã kiểm tra"

): alert (

"Chưa được kiểm tra"

); $ (

"# Bỏ chọn"

) .attr (

"đã chọn"

)? alert (

"Đã kiểm tra"

): alert (

"Chưa được kiểm tra"

);

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ba phương pháp khác được sử dụng cho phiên bản 1.6 cũng có thể được sử dụng cho các phiên bản dưới 1.6.

Thuộc tính so với Thuộc tính

Phương thức prop () cung cấp một cách để lấy các giá trị thuộc tính cho các phiên bản jQuery 1.6, trong khi phương thức attr () lấy các giá trị của các thuộc tính. Thuộc tính được kiểm tra là thuộc tính boolean có nghĩa là thuộc tính tương ứng là true nếu thuộc tính có mặt, ngay cả khi thuộc tính không có giá trị hoặc được đặt thành giá trị chuỗi rỗng hoặc "false". Giá trị thuộc tính đã chọn không thay đổi theo trạng thái của hộp kiểm, trong khi thuộc tính đã chọn sẽ thay đổi.


Xem thêm những thông tin liên quan đến chủ đề kiểm tra xem hộp kiểm đã được chọn chưa

Mở thùng kiểm tra xem đàn ong đã cho mật đều hay chưa

  • Tác giả: AUTU ÔTÔ VN
  • Ngày đăng: 2022-03-12
  • Đánh giá: 4 ⭐ ( 8153 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Kiểm tra xem giá trị ComboBox có được chọn không

  • Tác giả: vi.uwenku.com
  • Đánh giá: 5 ⭐ ( 5543 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang viết biểu mẫu bao gồm một số nút và hộp tổ hợp. Nút

Cách tạo danh sách kiểm tra trong Excel

  • Tác giả: cafechoi.com
  • Đánh giá: 3 ⭐ ( 2469 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học cách tạo danh sách kiểm tra trong Excel là một công cụ thay đổi cuộc chơi đối với nhiều người. Lập danh sách kiểm tra sẽ giúp bạn theo dõi nhiều việc hàng

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 ⭐ ( 4744 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootloader là gì? Cách kiểm tra máy đã mở khoá Bootloader hay chưa?

  • Tác giả: www.thegioididong.com
  • Đánh giá: 4 ⭐ ( 1984 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn là người sử dụng Android thì có thể đã nghe qua thuật ngữ Bootloader và thuật ngữ này vẫn chưa được nhiều người biết đến. Vậy Bootloader là gì? Và trước khi mở khóa Bootloader, hãy cùng tìm hiểu xem nó là gì nhé!

Có được kiểm tra hay không trong jQuery?

  • Tác giả: presbyteryofstockton.org
  • Đánh giá: 3 ⭐ ( 6815 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức prop () và is () là hai cách mà chúng ta có thể kiểm tra xem hộp kiểm có được chọn trong jQuery hay không. prop (): Phương thức này cung cấp một cách đơn giản để theo dõi trạng thái của các hộp kiểm. Nó hoạt động tốt trong mọi điều kiện vì mọi hộp kiểm đều có thuộc tính đã kiểm tra chỉ định trạng thái đã kiểm tra hoặc không kiểm tra của nó.

⚙ Cách Kiểm Tra Máy Đã Root Chưa Bằng Root Checker, Cách Kiểm Tra Máy Android Đã Root Hay Chưa

  • Tác giả: letspro.edu.vn
  • Đánh giá: 5 ⭐ ( 6298 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi sử dụng thiết bị Android thì bạn thường sử dụng với quyền user, Nhưng sau khi máy của bạn được root thì bạn sẽ được sử dụng với quyền là admin

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

Xem Thêm  Cách lấy chỉ mục của một đối tượng trong mảng trong JavaScript - chỉ mục trong javascript mảng