В этой статье описывается, как установить радиопроизводительные кнопки, флажки и раскрывающиеся меню с использованием DOM от JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
1. Установить радиопроизводительные кнопки
Радиобатовая находится в форме <input type = "radio" />. Это набор объектов для выбора, но только один может быть выбран за раз. У каждого есть проверенный атрибут, и когда кто -то выбирает его как тур, другие становятся ложными.
Давайте сначала опубликуем пример:
Скопируйте код следующим образом: <script type = "text/javascript">
функция getChoice () {
var Oform = document.forms ["uform1"];
var Achoices = Oform.camera;
для (i = 0; i <Achoices.length; i ++) // Передача всей таблицы единой опции
if (Achoices [i].
перерыв;
Alert («Бренд камеры:» + Achoices [i] .value);
}
функция setChoice (inum) {
var Oform = document.forms ["uform1"];
Oform.camera [Inum] .CHED = TRUE;
}
</script>
<form method = "post" name = "uform1" action = "addinfo.aspx">
Бренд камеры:
<p>
<input type = "radio" name = "camera" id = "canon" value = "canon">
<метка для = "canon"> canon </label>
</p>
<p>
<input type = "radio" name = "camera" id = "nikon" value = "nikon">
<метка для = "nikon"> nikon </label>
</p>
<p>
<input type = "radio" name = "camera" id = "sony" value = "sony" проверено>
<метка для = "sony"> sony </label>
</p>
<p>
<input type = "radio" name = "camera" id = "olympus" value = "olympus">
<метка для = "Olympus"> Olympus </label>
</p>
<p>
<input type = "radio" name = "camera" id = "samsung" value = "samsung">
<метка для = "samsung"> samsung </label>
</p>
<p>
<input type = "radio" name = "camera" id = "pentax" value = "pentax">
<метка для = "pentax"> pentax </label>
</p>
<p>
<input type = "radio" name = "camera" id = "Другое" value = "Другое">
<метка для = "Другие"> Другие </label>
</p>
<p>
<input type = "Отправить" name = "btnsubmit" id = "btnsubmit" value = "prope">
</p>
<p>
<input type = "button" value = "Обнаружение выбранного объекта" onclick = "getChoice ();">
<input type = "button" value = "set to canon" onclick = "setChoice (0);">
</p>
</form>
Радиобатовая находится в форме <input type = "radio" />. Это набор объектов для выбора, но только один может быть выбран за раз. У каждого есть проверенный атрибут, и когда кто -то выбирает его как тур, другие становятся ложными.
Из приведенного выше кода видно, что идентификатор и имя различны, и их имена одинаковы в наборе радиопроизводительных кнопок, и выбран только один. Идентификатор связан с <babel> или другими параметрами.
Среди кода: код для проверки выбранного объекта составляет (когда chcked value определенного элемента - Ture, обход заканчивается)
Кода -копия следующая: var Oform = document.forms ["uform1"];
var Achoices = Oform.camera;
для (i = 0; i <Achoices.length; i ++) // Передача всей таблицы единой опции
if (Achoices [i].
перерыв;
Alert («Бренд камеры:» + Achoices [i] .value);
2. Установите несколько ящиков выбора
В отличие от радиопроизводительных кнопок, флажок <input type = "fackbox" /> может быть выбран одновременно для обработки. Флажок перед каждым электронным письмом в почтовом ящике является типичным использованием.
Скопируйте код следующим образом: <script type = "text/javascript">
Функциональный флажок () {
var str = document.getElementsbyname ("hobby");
var objarray = str.length;
var chestr = "";
for (j = 0; j <objarray; j ++) {
if (str [j] .cecked == true) {
chestr + = str [j] .value + ",";
}
}
if (chestr == "") {
Alert («Пожалуйста, выберите хобби первым ~!»);
} еще {
Alert («Ваш первый выбор:» + chestr);
}
}
Функция изменения коробок (действие) {
varoform = document.forms ["myform1"];
var ocheckbox = Oform.hobby;
для (var i = 0; i <ocheckbox.length; i ++) // Передача каждого параметра
if (Действие <0) // Обратный выбор
ocheckbox [i] .cecked =! ocheckbox [i].
else // Если действие равно 1, выберите все, и если оно 0, выберите все
ocheckbox [i] .Checked = action;
}
</script>
<form method = "post" name = "myform1" action = "addinfo.aspx">
Вещи, которые вы любите делать:
<p>
<input type = "checkbox" name = "hobby" id = "ball" value = "ball">
<метка для = "Ball"> игра в баскетбол </label>
</p>
<p>
<input type = "fackbox" name = "hobby" id = "tv" value = "tv">
<label for = "TV"> Смотреть телевизор </label>
</p>
<p>
<input type = "fackbox" name = "hobby" id = "net" value = "net">
<метка для = "net"> в Интернете </label>
</p>
<p>
<input type = "fackbox" name = "hobby" id = "book" value = "book">
<метка для = "book"> Чтение </label>
</p>
<p>
<input type = "fackbox" name = "hobby" id = "trip" value = "trip">
<метка для = "Trip"> Travel </label>
</p>
<p>
<input type = "fackbox" name = "hobby" id = "music" value = "music">
<лейбл для = "Музыка"> Музыка </лейбл>
</p>
<p>
<input type = "fackbox" name = "hobby" id = "Другое" value = "Другие">
<метка для = "Другие"> Другие </label>
</p>
<p>
<input type = "button" value = "select All" onclick = "manakboxes (1);" />
<input type = "button" value = "нет выбора вообще" onclick = "manazingboxes (0);" />
<input type = "button" value = "anti-select" onclick = "changeboxes (-1);" />
<input type = "button" value = "Opper" onclick = "checkbox ()" />
</p>
</form>
Принцип флажка определяется с использованием логического значения с проверенным атрибутом. Выберите все и неполный выбор может пройти параметры в форме 0 и 1.
3. Выпадающее меню
Раскрывающееся меню <SELECT> является общепринятым элементом формы. Когда его выключение является селектируемой радио, функция радионотологии <input type = "radio" /> такая же, как и функция кнопки «Selectable». Когда несколько = "несколько" можно выбрать несколько, функция эквивалентна флажке, но занятая площадь намного меньше, чем флажок.
Общие свойства выпадающих меню:
| свойство | иллюстрировать |
| длина | Указывает количество параметров <опция> |
| выбран | Логическое значение, указывающее, выбран ли <опция> |
| SelectedIndex | Серийный номер выбранной опции равен -1, если опция не выбрана. Для раскрывающегося меню с несколькими сериями вернитесь к первым выбранным Номер последовательности начинается с 0 |
| текст | Параметры текст |
| ценить | Значение опции |
| тип | Тип раскрывающегося меню, один выбор возвращает Select-One, Multiply Winkice Возвращает Select-Multiple |
| параметры | Получите массив параметров, например: Oselectbox.options [2], указывая на третий элемент Oselectbox в раскрывающемся меню |
①. Потяните меню, чтобы получить значение для одного выбора
Скопируйте код следующим образом: <script language = "javascript">
function checksingl () {
varoform = document.forms ["myform1"];
var oselectbox = Oform.constellation;
var iChoice = oselectbox.selectedIndex; // Получить выбранный элемент
Alert («Вы выбрали» + oselectbox.options [iChoice] .Text);
}
</script>
<form method = "post" name = "myform1">
<метка для = "contellation"> Знак зодиака: </label>
<p>
<select id = "contellation" name = "contellation">
<option value = "aries" selected = "selected"> aries </option>
<option value = "Taurus"> Taurus </option>
<option value = "gemini"> Gemini </option>
<option value = "Cancer"> рак </option>
<option value = "leo"> Lion </option>
<option value = "divgo"> Virgo </option>
<опция value = "Libra"> Libra </option>
<option value = "scorpio"> Scorpio </option>
<vitor value = "sagittarius"> Snorker </option>
<option value = "capricorn"> Capricorn </option>
<опция value = "Aquarius"> Aquarius </option>
<option value = "Рыбы"> Рыбы </option>
</select>
</p>
<input type = "button" onclick = "checksingle ()" value = "view Options" />
</form>
②. Когда раскрывающийся меню будет много выбирается, возьмите ценность
Скопируйте код следующим образом: <script type = "text/javascript">
function checkmultiple () {
varoform = document.forms ["myform1"];
var oselectbox = Oform.constellation;
var Achoices = new Array ();
// путешествовать по всему выпадающему меню
для (var i = 0; i <oselectbox.options.length; i ++)
if (oselectbox.options [i]. Selected) // Если выбран
Achoices.push (oselectbox.options [i] .text); // Нажмите на массив
Alert («Вы выбрали:» + Achoices.join ()); // результат вывода
}
</script>
<form method = "post" name = "myform1">
<метка для = "contellation"> Знак зодиака: </label>
<p>
<select id = "contellation" name = "contellation" MALTY = "MALTY" Style = "Высота: 180px;">
<опция value = "aries"> aries </option>
<option value = "Taurus"> Taurus </option>
<option value = "gemini"> Gemini </option>
<option value = "Cancer"> рак </option>
<option value = "leo"> Lion </option>
<option value = "divgo"> Virgo </option>
<опция value = "Libra"> Libra </option>
<option value = "scorpio"> Scorpio </option>
<vitor value = "sagittarius"> Snorker </option>
<option value = "capricorn"> Capricorn </option>
<опция value = "Aquarius"> Aquarius </option>
<option value = "Рыбы"> Рыбы </option>
</select>
</p>
<input type = "button" onclick = "checkMultiple ()" value = "view Options" />
</form>
③. Общая ценность (что -то, что снижает одиночный и множество вариантов)
Скопируйте код следующим образом: <script language = "javascript">
функция getSelectvalue (box) {
varoform = document.forms ["myform1"];
var oselectbox = Oform.elements [Box]; // Соответствующее раскрывающееся меню выбора выбирается в соответствии с параметрами
if (oselectbox.type == "select-one") {// судить, является ли это одним или множественным выбором
var iChoice = oselectbox.selectedIndex; // Получить выбранный элемент
Alert ("Single Select, вы выбрали" + oselectbox.options [iChoice] .Text);
} еще {
var Achoices = new Array ();
// путешествовать по всему выпадающему меню
для (var i = 0; i <oselectbox.options.length; i ++)
if (oselectbox.options [i]. Selected) // Если выбран
Achoices.push (oselectbox.options [i] .text); // Нажмите на массив
Alert («Многократный выбор, вы выбрали:» + Achoices.join ()); // результат вывода
}
}
</script>
<form method = "post" name = "myform1">
созвездие:
<p>
<select id = "contellation1" name = "contellation1">
<option value = "aries" selected = "selected"> aries </option>
<option value = "Taurus"> Taurus </option>
<option value = "gemini"> Gemini </option>
<option value = "Cancer"> рак </option>
<option value = "leo"> Lion </option>
<option value = "divgo"> Virgo </option>
<опция value = "Libra"> Libra </option>
<option value = "scorpio"> Scorpio </option>
<vitor value = "sagittarius"> Snorker </option>
<option value = "capricorn"> Capricorn </option>
<опция value = "Aquarius"> Aquarius </option>
<option value = "Рыбы"> Рыбы </option>
</select>
<input type = "button" onclick = "getSelectValue ('contellation1')" value = "View Options" />
</p>
<p>
<select id = "contellation2" name = "contellation2" multy = "multy" style = "height: 120px;">
<опция value = "aries"> aries </option>
<option value = "Taurus"> Taurus </option>
<option value = "gemini"> Gemini </option>
<option value = "Cancer"> рак </option>
<option value = "leo"> Lion </option>
<option value = "divgo"> Virgo </option>
<опция value = "Libra"> Libra </option>
<option value = "scorpio"> Scorpio </option>
<vitor value = "sagittarius"> Snorker </option>
<option value = "capricorn"> Capricorn </option>
<опция value = "Aquarius"> Aquarius </option>
<option value = "Рыбы"> Рыбы </option>
</select>
<input type = "button" onclick = "getSelectValue ('contellation2')" value = "View Options" />
</p>
</form>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.