Định nghĩa và sử dụng

  • .val() lấy giá trị hiện tại của thành phần, hoặc thay đổi giá trị cho thành phần.
  • .val() sẽ lấy giá trị đầu tiên nếu thành phần chọn là một danh sách.
  • Thông thường giá trị là các thành phần của form.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.val()

Lấy giá trị của thành phần

$('input').val();

.val('giá trị')

Gán giá trị cho thành phần

$('select').val('giá trị của thành phần');
$('input').val(100);
  • Đã được thêm vào từ phiên bản 1.4

.val(function(index,value){...})

$('input').val(function(index,value){
    return value + ' ' + this.className;
});

.val()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var inputVal = $('input').val();
    $('button').click(function(){
       alert(inputVal); 
    });
});
</script>
</head>

<body>
<input type="text" value="12">
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng $('input').val() ta đã lấy giá trị của <input>, click vào button ta sẽ thấy kết quả.

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $("input").keyup(function () {
        var value = $(this).val();
        $("p").text(value);
    }).keyup();
});
</script>
</head>

<body>
<input type="text" value="Đổi text này để thấy kết quả" size="30">
<p></p>
</body>
</html>

Hiển thị trình duyệt:

Thay đổi giá trị trong input ta sẽ thấy kết quả.

.val('Giá trị')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var inputVal = $('input').val(200);
});
</script>
</head>

<body>
<input type="text" value="">
</body>
</html>

Hiển thị trình duyệt:

Ta thấy giá trị 200 đã được gán cho input

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $("button").click(function () {
        var text = $(this).text();
        $("input").val(text);
    });
});
</script>
</head>

<body>
<input type="text" value="">
<button>CSS</button>
<button>HTML</button>
<button>JQUERY</button>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy các giá trị của button đã được gán cho input.

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio2" ]);
});
</script>
</head>

<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<br/>
<input type="checkbox" name="checkboxname" value="check1" /> check1
<input type="checkbox" name="checkboxname" value="check2" /> check2
<br/>
<input type="radio" name="r" value="radio1" /> radio1
<input type="radio" name="r" value="radio2" /> radio2
</body>
</html>

Hiển thị trình duyệt:

Ta thấy các giá trị của form đã được gán giá trị tương ứng.

.val(function(index,value){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('input').val(function( index, value ) {
        return value + ' ' + this.className;
    });
});
</script>
</head>

<body>
<input type="text" value="" class="test">
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng trên ta đã lấy giá trị của thuộc tính class để gán cho giá trị của thuộc tính value