.val()

Đị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

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

.unwrap()

.width()