Phương thức val() trong jQuery

1) Phương thức val() trong jQuery

- Phương thức val() dùng để thiết lập hoặc trả về giá trị của phần tử.

- Lưu ý: Phần tử ở đây chính là các phần tử thuộc dạng <input>, <textarea>, <select>

2) Cách sử dụng phương thức val() trong jQuery

- Đối với phương thức val(), chúng ta có ba trường hợp sử dụng tương ứng với ba loại cú pháp:

2.1) Lấy giá trị của phần tử

- Dưới đây là cú pháp dùng để lấy giá trị của phần tử:

$(selector).val();

- Lưu ý: Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức val() chỉ trả về giá trị của phần tử trùng khớp được tìm thấy đầu tiên.

2.2) Thiết lập lại giá trị của phần tử

- Dưới đây là cú pháp dùng để thiết lập lại giá trị của phần tử:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị)

$(selector).val(value);

- Trong đó, tham số "value" là giá trị mà bạn muốn thiết lập cho phần tử.

2.3) Thiết lập lại giá trị của phần tử (sử dụng hàm)

- Dưới đây là cú pháp dùng để thiết lập lại giá trị của phần tử bằng cách sử dụng hàm:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng)

$(selector).val(function(index,currentvalue){
    return value;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

3) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var a = $("input[name='hoten']").val();
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("input[name='hoten']").val("NGUYỄN THÀNH NHÂN");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("input[type='text']").val(function(a,b){
                if(a==0){return "Lữ Bố";}
                if(a==1){return b;}
                if(a==2){return b + " - Tào Tháo";}
            });
        });
    });
</script>