Отключить / включить элементы формы
Используя jQuery, вы можете легко отключить элементы формы, установив для отключенного значения атрибута элемента формы значение «отключено». Чтобы сделать это, мы просто выбираем вход, а затем, используя метод attr() , устанавливаем для атрибута disabled значения input, равного disabled.
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input name=»button» type=»button» id=»button» value=»Click me»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘#button’)
.attr(‘disabled’, ‘disabled’);
})(jQuery);
</body>
</html>
|
Чтобы включить отключенный элемент формы, мы просто удаляем отключенный атрибут с помощью removeAttr() или устанавливаем пустое значение атрибута с помощью attr() .
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input name=»button» type=»button» id=»button» value=»Click me» disabled=»disabled»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){ $(‘#button’).removeAttr(‘disabled’);
// or
// $(‘#button’).attr(‘disabled’, »);
})(jQuery);
</body>
</html>
|
Как определить, отключен ли элемент формы или включен
С помощью выражений фильтра форм jQuery :disabled или :enabled, довольно легко выбрать и определить (логическое значение), отключен или включен элемент формы. Изучите код ниже для уточнения.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input name=»button» type=»button» id=»button1″>
<input name=»button» type=»button» id=»button2″ disabled=»disabled»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Is it enabled?
alert($(‘#button1’).is(‘:enabled’));
// Or, using a filter
alert($(‘#button1:enabled’).length);
// Is it disabled?
alert($(‘#button2’).is(‘:disabled’));
// Or, using a filter
alert($(‘#button2:disabled’).length);
})(jQuery);
</body>
</html>
|
Выбор / снятие одного флажка или переключателя
Вы можете выбрать переключатель или установить флажок, установив для его атрибута true значение true с помощью attr() .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input name=»» value=»» type=»checkbox»>
<input name=»» value=»» type=»radio»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Set all check boxes or radio buttons to selected
$(‘input:checkbox,input:radio’).attr(‘checked’, ‘checked’);
})(jQuery);
</body>
</html>
|
Чтобы очистить ввод переключателя или флажок, просто удалите проверенный атрибут с помощью метода removeAttr() или задайте для значения checked атрибута пустую строку.
|
01
02
03
04
05
06
07
08
09
10
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input name=»» type=»checkbox» value=»Test1″ checked=»checked»>
<input name=»» type=»radio» value=»Test2″ checked=»checked»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){ $(‘input’).removeAttr(‘checked’);
})(jQuery);
</body>
</html>
|
Выбор / снятие нескольких флажков или переключателей
Вы можете использовать val() jQuery val() на нескольких входах переключателей или переключателях, чтобы установить входы на флажок. Это делается путем передачи в метод val() массива, содержащего строку, совпадающую с атрибутом входного значения переключателя или переключателя.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input type=»radio» value=»radio1″>
<input type=»radio» value=»radio2″>
<input type=»checkbox» value=»checkbox1″>
<input type=»checkbox» value=»checkbox2″>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Check all radio and check box inputs on the page.
$(‘input:radio,input:checkbox’).val([‘radio1’, ‘radio2’, ‘checkbox1’, ‘checkbox2’]);
// Use explicit iteration to clear.
// $(‘input:radio,input:checkbox’).removeAttr(‘checked’);
// or
// $(‘input:radio,input:checkbox’).attr(‘checked’, »);
})(jQuery);
</body>
</html>
|
Примечания: Если флажок или переключатель уже установлен, использование val() не очистит элемент ввода.
Определение, установлен ли флажок или переключатель или сброшен
Мы можем определить, выбран ли флажок ввода или переключатель или удален с помощью фильтра формы :checked . Изучите код, приведенный ниже, для нескольких случаев использования фильтра :checked .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input checked=»checked» type=»checkbox»>
<input checked=»checked» type=»radio»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Alerts «true»
alert($(‘input:checkbox’).is(‘:checked’));
// Or, added to wrapper set if checked.
alert($(‘input:checkbox:checked’).length);
// Alerts «true»
alert($(‘input:radio’).is(‘:checked’));
// Or, added to wrapper set if checked.
alert($(‘input:radio:checked’).length);
})(jQuery);
</body>
</html>
|
Как определить, скрыт ли элемент формы
Вы можете определить, скрыт ли элемент формы, используя :hidden фильтр формы. Изучите код, приведенный ниже, для нескольких случаев использования фильтра :checked .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input type=»hidden»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alerts «true»
alert($(‘input’).is(‘:hidden’));
// Or, added to wrapper set if hidden.
alert($(‘input:hidden’).length);
})(jQuery);
</body>
</html>
|
Установка / получение значения элемента ввода
Метод val() может использоваться для установки и получения значения атрибута элемента ввода (кнопка, флажок, скрытый, изображение, пароль, радио, сброс, отправка, текст). Ниже я устанавливаю значение для каждого входа в val() а затем оповещаю о значении, используя метод val() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input type=»button»>
<input type=»checkbox»>
<input type=»hidden»>
<input type=»image»>
<input type=»password»>
<input type=»radio»>
<input type=»reset»>
<input type=»submit»>
<input type=»text»>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘input:button’).val(‘I am a button’);
$(‘input:checkbox’).val(‘I am a check box’);
$(‘input:hidden’).val(‘I am a hidden input’);
$(‘input:image’).val(‘I am an image’);
$(‘input:password’).val(‘I am a password’);
$(‘input:radio’).val(‘I am a radio’);
$(‘input:reset’).val(‘I am a reset’);
$(‘input:submit’).val(‘I am a submit’);
$(‘input:text’).val(‘I am a text’);
// Alerts input’s value attribute
alert($(‘input:button’).val());
alert($(‘input:checkbox’).val());
alert($(‘input:hidden’).val());
alert($(‘input:image’).val());
alert($(‘input:password’).val());
alert($(‘input:radio’).val());
alert($(‘input:reset’).val());
alert($(‘input:submit’).val());
alert($(‘input:text’).val());
})(jQuery);
</body>
</html>
|
Установка / получение выбранной опции выбранного элемента
Используя метод val() , вы можете установить выбранное значение элемента <select> , передав методу val() строку, представляющую значение, присвоенное элементу <option> .
Чтобы получить значение элемента <select> , снова используйте метод val() чтобы определить, какая опция выбрана. Метод val() в этом сценарии возвращает значение атрибута выбранного параметра.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<select id=»s» name=»s»>
<option value=»option1″>option one</option>
<option value=»option2″>option two</option>
</select>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Set the selected option in the select element to «option two»
$(‘select’).val(‘option2’);
// Alerts «option2»
alert($(‘select’).val());
})(jQuery);
</body>
</html>
|
Установка / получение выбранных параметров элемента с несколькими вариантами выбора
Используя метод val() мы можем установить выбранные значения элемента множественного выбора, передав методу val() массив, содержащий соответствующие значения.
Чтобы получить выбранные параметры в элементе множественного выбора, мы снова используем метод val() для получения массива выбранных параметров. Массив будет содержать значения атрибутов выбранных опций.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<select size=»4″ multiple=»multiple»>
<option value=»option1″>option one</option>
<option value=»option2″>option two</option>
<option value=»option3″>option three</option>
<option value=»option4″>option four</option>
</select>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Set the value of the selected options
$(‘select’).val([‘option2’, ‘option4’]);
// Get the selected values
alert($(‘select’).val().join(‘, ‘));
})(jQuery);
</body>
</html>
|
Установка / получение текста, содержащегося в <textarea>
Вы можете установить содержимое текстового узла элемента <textarea> , передав методу val() текстовую строку, которая будет использоваться в качестве текста. Чтобы получить значение элемента <textarea> , мы снова используем метод val() для извлечения текста, содержащегося внутри.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<textarea></textarea>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Set the text contained within
$(‘textarea’).val(‘I am a textarea’);
// Alerts «I am a textarea»
alert($(‘textarea’).val());
})(jQuery);
</body>
</html>
|
Установка / получение значения атрибута элемента кнопки
Вы можете установить атрибут value элемента button, передав методу val() текстовую строку. Чтобы получить значение элемента кнопки, снова используйте метод val() для получения текста.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<button>Button</button>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Set the value: <button value=»I am a Button Element»>
$(‘button’).val(‘I am a Button Element’)
// Alerts «I am a Button Element»
alert($(‘button’).val());
})(jQuery);
</body>
</html>
|
Редактирование выбранных элементов
jQuery делает некоторые общие задачи, связанные с редактированием выбранных элементов, тривиальными. Ниже приведены некоторые из этих задач с закодированными примерами.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// Add options to a select element at the end
$(‘select’).append(‘<option value=»»>option</option>’);
// Add options to the start of a select element
$(‘select’).prepend(‘<option value=»»>option</option>’);
// Replace all the options with new options
$(‘select’).html(‘<option value=»»>option</option><option value=»»>option</option>’);
// Replace items at a certain index using the :eq() selecting filter to
// select the element, and then replace it with the .replaceWith() method
$(‘select option:eq(1)’).replaceWith(‘<option value=»»>option</option>’);
// Set the select elements’ selected option to index 2
$(‘select option:eq(2)’).attr(‘selected’, ‘selected’);
// Remove the last option from a select element
$(‘select option:last’).remove();
// Select an option from a select element via its
// order in the wrapper set using custom filters
$(‘#select option:first’);
$(‘#select option:last’);
$(‘#select option:eq(3)’);
$(‘#select option:gt(5)’);
$(‘#select option:lt(3)’);
$(‘#select option:not(:selected)’);
// Get the text of the selected option(s), this will return the text of
// all options that are selected when dealing with a multi-select element
$(‘select option:selected’).text();
// Get the value attribute value of an option in a select element
$(‘select option:last’).val();
// Get the index (0 index) of the selected option.
// Note: Does not work with multi-select elements.
$(‘select option’).index($(‘select option:selected’));
// Insert an option after a particular position
$(‘select option:eq(1)’).after(‘<option value=»»>option</option>’);
// Insert an option before a particular position
$(‘select option:eq(3)’).before(‘<option value=»»>option</option>’);
|
Выбор элементов формы по типу
Можно выбирать элементы формы по их типу, например, $('input:checkbox') . jQuery предоставляет следующие фильтры типов форм для выбора элементов формы по их типу.
-
:text -
:password -
:radio -
:checkbox -
:submit -
:image -
:reset -
:file -
:button
Выбор всех элементов формы
Вы можете выбрать все элементы формы, используя :input фильтр формы :input . Этот фильтр будет выбирать не только элементы ввода, но и любые элементы <textarea> , <select> или <button> . В приведенном ниже кодированном примере обратите внимание на длину набора оболочек при использовании :input фильтра.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input type=»button» value=»Input Button»>
<input type=»checkbox»>
<input type=»file»>
<input type=»hidden»>
<input type=»image»>
<input type=»password»>
<input type=»radio»>
<input type=»reset»>
<input type=»submit»>
<input type=»text»>
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Alerts «13» form elements
alert($(‘:input’).length);
})(jQuery);
</body>
</html>
|