Ý kiến học viên

Phạm Đức Nam

Phạm Đức Nam

Chất lượng giảng dạy rất tốt, giảng viên nhiệt tình chỉ bảo.
  • - Phone : 01658977882
  • - Email : phamducnamhd292@gmai.com
  • - Facebook : Xem
Đặng Cao Sơn

Đặng Cao Sơn

Khóa học dễ hiểu, giảng viên nhiệt tình, nhiều tình bài tập tình huốn...
  • - Phone : 0938204886
  • - Email : soncshs1986@gmail.com
  • - Facebook : Xem
Nguyễn Thành Đạt

Nguyễn Thành Đạt

Chất lượng giảng dạy tốt giảng viên hướng dẫn, chỉ bảo nhiệt tình... v...
  • - Phone : 0988017390
  • - Email : caubevang00@gmail.com
  • - Facebook : Xem
Viết đánh giá

Viết đánh giá

Về chất lượng đào tạo, website

Đánh giá của học viên

Ý kiến của học viên

Xem đánh giá của học viên về phpandmysql.net

jQuery form - Thao tác với radio button

Radio button là nút lựa chọn chỉ một đối tượng, khác với checkbox cùng một lúc ta có thể chọn lựa nhiều giá trị một lúc

Trong jQuery ta có thể thao tác với các đối tượng radio button một cách dễ dàng

- Ta có một nhóm các nút radio cho người dùng chọn giới tính


<input type="radio" name="sex" value="Nam"/>Nam
<input type="radio" name="sex" value="Nữ"/>Nữ
<input type="radio" name="sex" value="Unknown"/>Không xác định


- Chú ý rằng thuộc tính name của các radio button này phải giống nhau và có giá trị là sex, nếu tên các radio này không giống nhau lúc này nó sẽ trở thành checkbox




1. Để lấy giá trị của radio đang được check

('input:radio[name=sex]:checked').val();

2. Để chọn nút giới tính Nam
('input:radio[name=sex]:nth(0)').attr('checked',true);
Hoặc dùng
$('input:radio[name=sex]')[0].checked = true;  

3. Chọn nút giới tính Nữ

- Các bạn chú ý, nút Nam có số thứ tự là 0, Nữ là 1 và Không xác định là 2

('input:radio[name=sex]:nth(1)').attr('checked',true);
Hoặc dùng
$('input:radio[name=sex]')[1].checked = true;  

- Tượng tự với các nút khác, đây là code ví dụ các bạn có thể xem demo

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryradio button</title>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 // Lấy giá trị của radio checked
    $("#isSelect").click(function () {
     alert($('input:radio[name=sex]:checked').val());
    });
 
 // Chọn Nam
    $("#selectMale").click(function () {
  $('input:radio[name=sex]:nth(0)').attr('checked',true);
  //$('input:radio[name=sex]')[0].checked = true;
    });
 
 // Chọn Nữ
    $("#selectFemale").click(function () {
  $('input:radio[name=sex]:nth(1)').attr('checked',true);
  //$('input:radio[name=sex]')[1].checked = true;
    });
 
  // Chọn KXD
    $("#selectUnknown").click(function () {
  $('input:radio[name=sex]:nth(2)').attr('checked',true);
  //$('input:radio[name=sex]')[2].checked = true;
    });
 
 // Xóa 
    $("#reset").click(function () {
  $('input:radio[name=sex]').attr('checked',false);
    });
});
</script>
</head>
 
<body>
<h1>jQuery thao tác với radio button</h1>
<form action="">
<input type="radio" name="sex" value="Nam"/>Nam
<input type="radio" name="sex" value="Nữ"/>Nữ
<input type="radio" name="sex" value="Unknown"/>Không xác định
<br>
<br>
<br>
<input type='button' value='Lấy giá trị đang checked' id='isSelect'>
<input type='button' value='Chọn Nam' id='selectMale'>
<input type='button' value='Chọn Nữ' id='selectFemale'>
<input type='button' value='Chọn KXD' id='selectUnknown'>
<input type='button' value='Xóa' id='reset'>
</form>
</body>
</html>


- Xem demo online
Bạn vẫn chưa hiểu vấn đề, bạn cần người trợ giúp?. Hãy click vào đây để gửi câu hỏi, mọi người sẽ support cho bạn