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);