jQuery функция .val()
Раздел: Работа с формой
Описание: Получить текущее значение элемента или установить значение соответствующего элемента input, textarea, checkbox, radio, select.
.val() - метод используется главным образом для получения или установки значений элементов формы. При вызове на несуществующий элемент она вернет undefined.
Получение и установка значений input[type="text"] или textarea
html:
<input name="textfield" type="text" id="textfield" value="Исходное значение">
javascript:
// Получаем значение #textfield
var txt = $("#textfield").val();
// Устанавливаем значение #textfield
var newTxt = 'value';
$("#textfield").val(newTxt);
Для получения значений select, необходимо использовать селекторы :selected
html:
<select name="select" id="select"> <option value="1" selected>Значение 1</option> <option value="2">Значение 2</option> <option value="3">Значение 3</option> </select>
Получить значение выбранного элемента #select
javascript:
$("#select option:selected").val();
$("#select :selected").val();
$("select#select").val();
Перебрать все элементы списка
javascript:
$('#select option').each(function(){
var val = $(this).val();
});
Сделать выбранным элемент select с значением 2
javascript:
$("#select [value='2']").attr("selected", true);
// или
$("#select [value='2']").prop("selected", true);
Получить значение radio :checked
html:
<div id="radio"> <input name="radio" type="radio" value="radio1"> <input name="radio" type="radio" value="radio2"> <input name="radio" type="radio" value="radio3" checked> <input name="radio" type="radio" value="radio4"> <input name="radio" type="radio" value="radio5"> </div>
javascript:
// по имени
$("input[type=radio][name=radio]:checked" ).val();
// по ID блока
$("#radio input:checked" ).val();
Получить значение checkbox :checked
html:
<input type="checkbox" name="checkbox" id="checkbox" value="value" />
javascript:
var val = $("input#checkbox:checkbox:checked").val();
var val2 = $('#checkbox:checked').val();
Если флажок не установлен .val() вернет undefined
Рекомендуется делать проверку отмечен ли флажок с помощью .prop()
javascript:
var val = $('#checkbox').prop('checked') ? $('#checkbox').val() : 0 ;
Установить флажок отмеченным
javascript:
$('#checkbox').prop('checked', true);