Необходимо получить значения атрибутов value элементов radio, checkbox иselect.
Решение
Для решения также подходит метод val() (листинг 2.4.3).
Листинг2 .4 .3 . Ис по л ьзование метода val()
|
1 2 3 4 5 6 7 8 9 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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<head> <title>example-2-4-3</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <style type="text/css"> p { border:1px dotted #369; padding:5px; color:#00f; } </style> <script type="text/javascript"> $(function(){ $("#getSingle").click(function(){ var single = $("#single option:selected").val(); $("p").empty().text(single); }); $("#getMultiple").click(function(){ var multiple = $("#multiple").val(); $("p").empty().text(multiple.join(", ")); }); $("#getCheckbox").click(function(){ var checkbox = $("input:checkbox:checked").val(); $("p").empty().text(checkbox); }); $("#getRadio").click(function(){ var radio = $("input:radio[name=r]:checked").val(); $("p").empty().text(radio); }); }); </script> </head> <body> <p></p> <select id="single"> <option value="s1">Single1</option> <option value="s2">Single2</option> <option value="s3">Single3</option> <option value="s4">Single4</option> <option value="s5">Single5</option> </select> <select id="multiple" multiple="multiple"> <option value="m1" selected="selected">Multiple1</option> <option value="m2">Multiple2</option> <option value="m3" selected="selected">Multiple3</option> <option value="m4">Multiple4</option> <option value="m5">Multiple5</option> </select><br /> <input type="checkbox" name="c" value="check" checked="checked" /><label>check</label><br /> <input type="radio" name="r" value="radio1" /><label>radio1</label> <input type="radio" name="r" value="radio2" /><label>radio2</label> <input type="radio" name="r" value="radio3" checked="checked" /><label>radio3</label><hr /> <button id="getSingle">select #single</button> <button id="getMultiple">select #multiple</button> <button id="getCheckbox">checkbox</button> <button id="getRadio">radio</button> </body> </html> |
Обсуждение
Рассмотрим код, приведенный в листинге 2.4.3. HTML-разметка представляет собой набор элементов, с которыми мы будем экспериментировать. В элемент p мы будем вставлять полученные значения. Далее следуют два элемента select, причем второй с возможностью выбора нескольких опций одновременно. Следом идут элемент checkbox и набор элементов radio. Заканчивается HTML-разметка четырьмя кнопками button, с помощью которых мы будем получать значения выбранных элементов.
Теперь разберем JavaScript-код. С каждой кнопкой мы связываем событие click и по наступлению этого события вызываем функцию-обработчик. Отметьте для себя то обстоятельство, что в функции-обработчике везде вызывается один и тот же метод val(), вопрос только в том, чтобы грамотно отыскать именно те элементы, к которым его нужно применить.
Давайте подробно рассмотрим, что именно будет делать функция, вызванная при щелчке на кнопке с идентификатором #getMultiple.
Первое — в переменной multiple сохраняются значения выбранных опций элемента select. Поскольку выбранных опций может быть несколько, в этом случае метод val() вернет массив значений. Второе — отыскивается элемент p, из которого с помощью метода empty() на всякий случай удаляется все внутреннее содержимое, а затем в него же в виде текста вставляются значения из multiple, предварительно объединенные в строку с помощью метода join().
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)
- Создание галереи миниатюр (0)