JavaScript урок12. Объектная модель документа (продолжение): идентификация в javascript checkbox и radio

Авторadmin / Опубликовано4 комментария

На уроке рассматриваются способы доступа в javascript к checkbox (флажкам) и radio (радио-кнопкам или переключателям). Разбирается принцип работы со свойством checked для осуществления проверки radio и checkbox

Назад
К оглавлению
Далее к уроку 13

Объект javascript checkbox

<form name="f1">
<input type="checkbox" name="yourName" id="ch1"> Да
</form>

Элемент checkbox идентифицируется:

document.getElementById('ch1').checked=true;

Свойства элемента checkbox:

  • checked — содержит булево значение true или false, в зависимости от того, отмечен или нет данный флажок;
  • name — соответствует атрибуту name тега input
  • value — соответствует атрибуту value тега input
  • type — для объектов checkbox значением этого атрибута является строка checkbox
    • Пример: По щелчку на элементе флажок (checkbox) выводить диалоговое окно с сообщением для подтверждения: «Номер люкс очень дорогой. Вы уверены?». Скрипт описать в качестве значения атрибута. 
    <input type="checkbox" name="checkbox1"  value="Номер Люкс"  onсlick="
      confirm('Номер люкс очень дорогой. Вы уверены?')">Номер люкс

    Свойство checked

    Пример: По загрузке страницы устанавливать флажок (checkbox) отмеченным
    свойство checked javascript

    1 способ (через name):
    В скрипте:

    function check(){
	 document.f1.ch1.checked=true;
}

    В html:

    <body onload="check()">
<form name="f1">
  <input type="checkbox"  name="ch1">пункт1<br>
  <input type="checkbox"  name="ch2">пункт2<br>
</form> …

    2 способ (через id):
    В скрипте:

    function check(){
	ch1.checked=true;
}

    В html:

    <body onload="check()">
  <input type="checkbox"  id="ch1">пункт1<br>
  <input type="checkbox"  id="ch2">пункт2<br>
    Задание js12_1. Создать страницу проверки знаний учащегося с одним вопросом и тремя ответами на вопрос: два из них правильные и один неправильный. Осуществить проверку правильности отмеченных при помощи элементов формы checkbox ответов. Функцию проверки запускать по щелчку кнопки
    checkbox javascript

    Объект переключатель в javascript — radio и свойство checked

    Элемент javascript radio предназначен для выбора только одного единственного варианта из нескольких.

    Для того, чтобы несколько переключателей работали сгруппировано, т.е. чтобы при выборе одного radio все остальные бы отключались, необходимо для всех radio установить одинаковое значение атрибута name

    Рассмотрим пример использования радиокнопок:
    html-код:

    <body>
<form name="f1">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="button" onclick="fanc()">
</form>
</body>

    Группа радиокнопок (radio) идентифицируется в скрипте следующим образом:
    Скрипт:

    function fanc(){
  document.getElementById("id1").checked=true; // 1-й способ   
  document.f1.r1[0].checked=true;              // 2-й способ 
  document.f1['r1'][0].checked=true;	       // 3-й способ 
}

    Первый способ является наиболее предпочтительным.

    Свойства:

  • checked — содержит булево значение true или false, в зависимости от того, выбрана или нет данная селекторная кнопка;
  • length — представляет количество селекторных кнопок в объекте radio;
  • name — соответствует атрибуту name тега input
  • value — соответствует атрибуту value тега input ;
  • type — для объектов radio значением этого атрибута является строка «radio»

    • Рассмотрим пример использования в javascript radio с checked свойством:

    Пример: По щелчку на кнопке устанавливать первый переключатель отмеченным

    radio javascript
    1 способ:
    Скрипт:

    function fanc(){
	idr1.checked=true;
}

    HTML-код:

    <input type="radio" name="r1" id="idr1">пункт1<br>
<input type="radio" name="r1" id="idr2">пункт1<br>
<input type="button" onClick ="fanc()" value="отметить">

    2 способ:
    Скрипт:

    function fanc(){
	document.f1.r1[0].checked=true;
}

    HTML-код:

    <form name="f1">
<input type="radio" name="r1">пункт1<br>
<input type="radio" name="r1">пункт1<br>
<input type="button" onClick ="fanc()" value="отметить">
</form>
    Задание js12_2.
    Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы radio ответа. Функцию проверки запускать по щелчку кнопки
    radio в javascript
    Назад
    К оглавлению
    Далее к уроку 13

    4 комментария для “JavaScript урок12. Объектная модель документа (продолжение): идентификация в javascript checkbox и radio”

    1. Поправьте:
      «Номер люкс очень дрогой. Вы уверены?».

    Обсуждение закрыто.