Phương thức val
Phương thức val cho phép lấy và thay đổi
giá trị hiện tại của phần tử.
Cú pháp
Chúng ta có thể lấy giá trị hiện tại của phần tử đầu tiên trong tập hợp như sau:
$(selector).val();
Phương thức val chủ yếu được sử dụng để
lấy giá trị của các phần tử biểu mẫu, chẳng hạn như:
input,
select
và textarea. Nếu
nó được gọi trên một bộ sưu tập trống, nó sẽ trả về undefined.
Khi làm việc với select có thuộc tính
multiple được đặt, phương thức sẽ trả về một mảng giá trị của mỗi
option được chọn. Nếu không có cái nào được chọn,
một mảng trống sẽ được trả về. Chúng ta có thể đặt
giá trị cho từng phần tử trong tập hợp như sau. Tham số có thể
là một chuỗi, mảng hoặc số:
$(selector).val(giá trị);
Áp dụng một hàm cho mỗi phần tử trong tập hợp. Hàm nhận chỉ mục hiện tại trong tập hợp làm tham số đầu tiên, và giá trị hiện tại của nó làm tham số thứ hai:
$(selector).val(tên thuộc tính, function(chỉ mục trong tập hợp, giá trị hiện tại));
Ví dụ
Trong ví dụ tiếp theo, hãy lấy các giá trị được nhập vào input và hiển thị chúng bên dưới trong đoạn văn:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Ví dụ
Bây giờ với phương thức val, chúng ta sẽ
ghi giá trị của các nút mà chúng ta
nhấn vào ô input bên dưới:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});
