.val()

Возвращает или устанавливает значение атрибута value

  • version added: 1.0.val()

    нет параметров


  • version added: 1.0.val( value )

    value

    Тип: Строка или Массив

    Строка текста или массив строк, которые для заполнения элемента. Устанавливает значение атрибута value.


  • version added: 1.4.val( function(index, value) )

    function(index, value)

    Тип: Функция

    Атрибуту value будет присвоено значение, которое вернет функция function. Функция для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index (позиция элемента в наборе) и value (текущее значение атрибута value у элемента).


Метод используется для получения значений элементов формы таких как input, select, textarea. Метод возвращает строку, в случае <select multiple="multiple"> массив

Для элементов select и чекбоксов, мы можем так же использовать :selected и :checked:

$('select.foo option:selected').val();    // достаём значение из элемента select
$('select.foo').val();                    // альтернативный способ
$('input:checkbox:checked').val();        // достаём значение из чекбокса
$('input:radio[name=bar]:checked').val(); // достаём значение из группы радио кнопок

Примеры

Пример: достать значение из элемента select и массив значений из множественного селектов.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { color:red; margin:4px; }
 b { color:blue; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p></p>
 <select id="single">
   <option>Single</option>
   <option>Single2</option>
 </select>
 <select id="multiple" multiple="multiple">
   <option selected="selected">Multiple</option>
   <option>Multiple2</option>
   <option selected="selected">Multiple3</option>
 </select>
<script>
   function displayVals() {
     var singleValues = $("#single").val();
     var multipleValues = $("#multiple").val() || [];
     $("p").html("<b>Single:</b> " +
                 singleValues +
                 " <b>Multiple:</b> " +
                 multipleValues.join(", "));
   }
   $("select").change(displayVals);
   displayVals();
</script>
</body>
</html>

Демо

Пример: получить значение поля input.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { color:blue; margin:8px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <input type="text" value="some text"/>
 <p></p>
<script>
   $("input").keyup(function () {
     var value = $(this).val();
     $("p").text(value);
   }).keyup();
</script>
</body>
</html>

Демо

Так же мы можем задавать значения.

Примеры

Пример: задаём значение полю input.

<!DOCTYPE html>
<html>
<head>
 <style>
 button { margin:4px; cursor:pointer; }
 input { margin:4px; color:blue; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div>
   <button>Feed</button>
   <button>the</button>
   <button>Input</button>
 </div>
 <input type="text" value="click a button" />
<script>
   $("button").click(function () {
     var text = $(this).text();
     $("input").val(text);
   });
</script>
</body>
</html>

Демо

Пример: используем функция в качестве аргумента для установки значения input.

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p>Type something and then click or tab out of the input.</p>
 <input type="text" value="type something" />
<script>
 $('input').on('blur', function() {
   $(this).val(function( i, val ) {
     return val.toUpperCase();
   });
 });
 </script>
</body>
</html>

Демо

Пример: задаём значение селекту из одного значения, и множественному селекту, а так же чекбоксам и группе радио кнопок.

<!DOCTYPE html>
<html>
<head>
 <style>
 body { color:blue; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <select id="single">
   <option>Single</option>
   <option>Single2</option>
 </select>
 <select id="multiple" multiple="multiple">
   <option selected="selected">Multiple</option>
   <option>Multiple2</option>
   <option selected="selected">Multiple3</option>
 </select><br/>
 <input type="checkbox" name="checkboxname" value="check1"/> check1
 <input type="checkbox" name="checkboxname" value="check2"/> check2
 <input type="radio"  name="r" value="radio1"/> radio1
 <input type="radio"  name="r" value="radio2"/> radio2
<script>
   $("#single").val("Single2");
   $("#multiple").val(["Multiple2", "Multiple3"]);
   $("input").val(["check1","check2", "radio1" ]);
</script>
</body>
</html>

Демо

^ Наверх ^