:radio Selector trong jquery
Radio Selector sẽ lựa chọn tất cả các phần tử có type là radio. $( ":radio" ) và $( "[type=radio]" ) tương đương với nhau, cũng giống như các selector giả định khác(các selector bắt đầu bởi dấu ":") chúng nên được đặt trước bởi một tên thẻ hoặc một selector nào đó nếu không nó sẽ được hiểu ...
Radio Selector sẽ lựa chọn tất cả các phần tử có type là radio.
$( ":radio" ) và $( "[type=radio]" ) tương đương với nhau, cũng giống như các selector giả định khác(các selector bắt đầu bởi dấu ":") chúng nên được đặt trước bởi một tên thẻ hoặc một selector nào đó nếu không nó sẽ được hiểu là bộ chọn toàn bộ("*"). Nói cách khác $( ":radio" ) sẽ tương đương với $( "*:radio" ), do đó nên sử dụng $( "input:radio" ) để thay thế.
Để chọn tất cả các radio được liên kết với nhau(những tùy chọn radio cùng biểu thị cho một nội dung nào đó) bạn nên sử dụng $( "input[name=gender]:radio" ).
Chú ý: Bởi vì :radio là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :radio sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất, sử dụng [type="radio"] để thay thế.
Cú pháp
jQuery( ":radio" )
Ví dụ
Tìm kiếm phần tử input có type="radio" và đổi màu cho phần tử bao quanh nó:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
<style>
textarea {
height: 45px;
}
</style>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<form>
<div>
password:<input type="password">
</div>
<hr>
<div>
radio1:<input type="radio" name="radio">
</div>
<div>
checkbox:<input type="checkbox">
</div>
<div>
radio3:<input type="radio" name="radio">
</div>
<hr>
<div>
reset:<input type="reset">
</div>
<hr>
<div>
submit:<input type="submit">
</div>
<hr>
<div>
text:<input type="text">
</div>
<hr>
<div>
select:
<select>
<option>Option</option>
</select>
</div>
<hr>
<div>
textarea:<textarea></textarea>
</div>
<hr>
<div>
Button:<button>Button</button>
</div>
</form>
<hr>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "input:radio" ).parent().css( "background", "red");
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
