Lặp lại mọi thứ theo trình tự do cho tất cả 6 tùy chọn [Phút, Giờ, Ngày. Tuần, Tháng, Năm]. Cũng đảm bảo rằng trong hình ảnh của bạn tồn tại các hoạt động, tùy chọn phải được chọn trước để nó biết liệu nó đã được chọn hay chưa. Đồng thời giảm thời gian chờ trên hoạt động Hình ảnh tồn tại xuống khoảng 1000 mili giây
Một dòng mã bên dưới sẽ cung cấp trạng thái của nút radio bằng jQuery. Nó kiểm tra xem thuộc tính đã kiểm tra có được kiểm tra hay không bằng cách sử dụng jQuery và sẽ trả về đúng hoặc sai. Mã bên dưới sẽ hoạt động với jQuery 1. 7. 2 phiên bản
var isChecked = $['#rdSelect'].prop['checked'];
Kiểm tra chính mình
Nếu bạn đang sử dụng phiên bản jQuery cũ hơn [trước 1. 7. 2] thì bạn có thể sử dụng mã bên dưới
var isChecked = $['#rdSelect'].attr['checked']?true:false;
Tôi đã nhận thấy rằng trên nhiều trang web có viết rằng thuộc tính 'đã kiểm tra' sẽ trả về đúng hoặc sai nếu được sử dụng với phương thức 'attr', nhưng điều này không đúng. Nếu hộp kiểm được chọn thì nó sẽ trả về trạng thái là "đã chọn", nếu không thì "không xác định"
Nút radio là một biểu tượng được sử dụng trong các biểu mẫu để nhận đầu vào từ người dùng. Nó cho phép người dùng chọn một giá trị từ nhóm các nút radio. Các nút radio về cơ bản được sử dụng cho một lựa chọn từ nhiều nút, chủ yếu được sử dụng trong các biểu mẫu GUI
Bạn chỉ có thể đánh dấu/kiểm tra một nút radio giữa hai hoặc nhiều nút radio. Trong chương này, chúng tôi sẽ hướng dẫn bạn cách kiểm tra nút radio bằng ngôn ngữ lập trình JavaScript
Đối với điều này, trước tiên chúng tôi thiết kế một biểu mẫu chứa các nút radio bằng HTML, sau đó chúng tôi sẽ sử dụng lập trình JavaScript để kiểm tra nút radio. Chúng tôi cũng sẽ kiểm tra giá trị nút radio nào được chọn
Tạo một nút radio
Sau đây là một mã đơn giản để tạo một nhóm các nút radio
sao chép mã
Kiểm tra nó ngay bây giờKiểm tra một nút radio
Chúng tôi không cần viết bất kỳ mã cụ thể nào để kiểm tra nút radio. Chúng có thể được kiểm tra sau khi chúng được tạo hoặc chỉ định ở dạng HTML
Tuy nhiên, chúng ta phải viết mã JavaScript để lấy giá trị của nút radio đã chọn, mà chúng ta sẽ thấy trong chương bên dưới
Kiểm tra nút radio có được chọn hay không
Có hai cách trong JavaScript để kiểm tra nút radio được đánh dấu hoặc để xác định nút radio nào được chọn. JavaScript cung cấp hai phương thức DOM cho việc này
Thuộc tính kiểm tra radio đầu vào được sử dụng để kiểm tra xem hộp kiểm có được chọn hay không. sử dụng tài liệu. getElementById['id']. phương pháp kiểm tra cho điều này. Nó sẽ trả về trạng thái đã kiểm tra của nút radio dưới dạng giá trị Boolean. Nó có thể đúng hoặc sai
Đúng - Nếu nút radio được chọn
Sai - Nếu nút radio không được chọn/chọn
Xem mã JavaScript bên dưới để biết nó hoạt động như thế nào
Ví dụ
Ví dụ: chúng tôi có một nút radio có tên Summer và id = 'summer'. Bây giờ, chúng tôi sẽ kiểm tra bằng id nút này xem nút radio có được đánh dấu hay không
sao chép mã
truy vấnSelector[]
Hàm querySelector[] là một phương thức DOM của JavaScript. Phương pháp này được sử dụng để lấy phần tử khớp với bộ chọn CSS đã chỉ định trong tài liệu. Hãy nhớ rằng bạn cần chỉ định thuộc tính tên của nút radio trong mã HTML
Chúng ta có thể kiểm tra trạng thái của nút radio bằng cách sử dụng bộ chọn jQuery
if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}// Geting the state property which will be a boolean
$['#radio'].prop['checked'];// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Nó chính xác giống như phương pháp chúng ta sử dụng để kiểm tra khi hộp kiểm được chọn bằng jQuery
Trình duyệt của bạn không hỗ trợ thẻ video
1. Kiểm tra nếu một nút radio được kiểm tra bằng cách sử dụng // Geting the state property which will be a boolean
$['#radio'].prop['checked'];
0
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Đây là cách tốt nhất và được khuyên dùng nhất khi sử dụng jQuery
if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}Những gì chúng tôi đang làm ở đây là sử dụng phương thức jQuery
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Vì vậy, về cơ bản, chúng tôi thực hiện việc lựa chọn phần tử của mình bằng cách sử dụng
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];// Geting the state property which will be a boolean
$['#radio'].prop['checked'];if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}Bạn có thể chơi với ví dụ đơn giản này
Xem Bút trên CodePen
2. Kiểm tra xem đài có được kiểm tra bằng cách sử dụng // Geting the state property which will be a boolean
$['#radio'].prop['checked'];
5
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Thường có nhiều hơn một cách để làm mọi việc và trường hợp này sẽ không khác
Vì jQuery cũng cung cấp một cách để kiểm tra thuộc tính của các phần tử HTML, nên chúng ta có thể sử dụng phương thức
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];// Geting the state property which will be a boolean
$['#radio'].prop['checked'];// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Và, như trước đây, chúng ta có thể sử dụng boolean được trả về trong các điều kiện của mình, gán nó cho một biến, hiển thị nó, v.v.
Xem Bút trên CodePen
3. Kiểm tra nếu nút radio được chọn bằng bộ chọn
Đây là một cách khác ít được đề xuất hơn để kiểm tra trạng thái của nút radio
Nó bao gồm trực tiếp sử dụng bộ chọn có thuộc tính
if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}Để tìm hiểu xem chúng ta có tìm thấy một phần tử như vậy hay không, chúng ta sử dụng phương thức
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Nếu phần tử được tìm thấy, hàm
var isChecked = $['#rdSelect'].attr['checked']?true:false;10 sẽ trả về 1 [hoặc số lượng phần tử được so khớp] và 0 nếu không
Điều này có nghĩa là chúng ta có thể sử dụng nó trực tiếp trong điều kiện
var isChecked = $['#rdSelect'].attr['checked']?true:false;11 vì 0 sẽ được coi là
var isChecked = $['#rdSelect'].attr['checked']?true:false;12 và mọi giá trị trên 0 giống như giá trị
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Đây là một ví dụ
var isChecked = $['#rdSelect'].attr['checked']?true:false;1
Đây là một codepen bạn có thể chơi với
Xem Bút trên CodePen
4. Kiểm tra nếu một nút radio được chọn bằng Vanilla JavaScript
jQuery chỉ là một lớp trên cùng của JavaScript, điều đó có nghĩa là mọi thứ jQuery có thể làm cũng có thể được thực hiện bằng JavaScript thuần theo cách này hay cách khác
Nếu bạn đang sử dụng jQuery và muốn có quyền truy cập vào đối tượng JavaScript cho phần tử DOM đã chọn, tất cả những gì bạn phải làm là chọn phần tử đầu tiên trong đối tượng jQuery. Chúng tôi có thể làm như vậy bằng cách sử dụng
var isChecked = $['#rdSelect'].attr['checked']?true:false;14 hoặc
var isChecked = $['#rdSelect'].attr['checked']?true:false;15
Sau đó, chúng tôi chỉ cần truy cập trực tiếp vào thuộc tính
// Geting the state property which will be a boolean
$['#radio'].prop['checked'];Tuy nhiên, nếu bạn thực sự muốn thoát khỏi jQuery, bạn có thể chọn phần tử trực tiếp bằng cách sử dụng JavaScript bằng cách sử dụng
var isChecked = $['#rdSelect'].attr['checked']?true:false;17 nếu đó là một phần tử
Đây là tất cả các kết hợp, là kết hợp cuối cùng duy nhất là JavaScript thuần túy
if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}Không sử dụng var isChecked = $['#rdSelect'].attr['checked']?true:false;
18 để kiểm tra trạng thái nút radio
Phần tử radio HTML, về cơ bản là một
var isChecked = $['#rdSelect'].attr['checked']?true:false;19 với
if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}jQuery cung cấp một hàm khác có tên là
var isChecked = $['#rdSelect'].attr['checked']?true:false;18 cho phép chúng ta lấy thuộc tính của một phần tử đã cho
Một số nhà phát triển sử dụng phương pháp này để lấy giá trị mà không nhận ra rằng theo cách này, chúng tôi chỉ nhận được giá trị ban đầu của nút radio
Mọi thay đổi về trạng thái của phần tử sẽ không được phản ánh trên thuộc tính HTML này và do đó, việc sử dụng
var isChecked = $['#rdSelect'].attr['checked']?true:false;18 để nhận trạng thái của phần tử sẽ trả về giá trị không chính xác nếu phần tử thay đổi trạng thái động thông qua tương tác của người dùng hoặc theo chương trình
Vì vậy, làm những điều sau đây là một sai lầm lớn mà bạn muốn tránh bằng mọi giá
if[ $['#radio'].is[':checked'] ]{
alert["Radio Button Is checked!"];
}
else{
alert["Radio Button Is not checked :[ "];
}Kết luận về trạng thái nút radio
Chọn cách bạn thấy phù hợp hơn để kiểm tra xem một nút radio có được chọn không. Chỉ cần đảm bảo không sử dụng tùy chọn
var isChecked = $['#rdSelect'].attr['checked']?true:false;18 vì điều đó rất có thể dẫn đến các tình huống không mong muốn. [Và nếu bạn sử dụng nó, ít nhất hãy đảm bảo biết tại sao và những hậu quả có thể xảy ra]
Bây giờ bạn đã học các phương pháp cơ bản để kiểm tra trạng thái của các phần tử DOM. Bạn có thể áp dụng kiến thức tương tự để tắt các nút trong jQuery, kiểm tra trạng thái của hộp kiểm, tắt văn bản nhập, vùng văn bản, v.v.