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

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

Объект 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

    В скрипте:

    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>

    Задание 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;    
      document.f1.r1[0].checked=true;
      document.f1['r1'][0].checked=true;		
    }

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

    Свойства:

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

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

    radio javascript
    Скрипт:

    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

    Поделитесь уроком с коллегами и друзьями:
    2 комментария

      Dmitry

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

        admin

        а что там не так? спасибо заранее

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *


    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить