Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2017, 16:34
Интересующийся
Отправить личное сообщение для Walk Посмотреть профиль Найти все сообщения от Walk
 
Регистрация: 14.08.2017
Сообщений: 28

input radio - как узнать выбранный пункт?
Есть input radio:

<label class="control-label">Отзыв о…</label>
    <p>
        <input type="radio" name="review_type" value="1" id="review_type1" checked> Работе в компании<br />
        <input type="radio" name="review_type" value="2" id="review_type2"> Зарплате на должности<br />
        <input type="radio" name="review_type" value="3" id="review_type3"> Собеседовании<br />
        <input type="radio" name="review_type" value="4" id="review_type4"> Бонусах в компании<br />
    </p>


Пытаюсь определить выбранный пункт таким способом:
window.onload = function(){
    var rt1 = document.getElementById('review_type1');
    var rt2 = document.getElementById('review_type2');
    var rt3 = document.getElementById('review_type3');
    var rt4 = document.getElementById('review_type4');

    if (rt1.checked) {
        alert('Выбран 1 пункт');
    }
    if (rt2.checked) {
        alert('Выбран 2 пункт');
    }
    if (rt3.checked) {
        alert('Выбран 3 пункт');
    }
    if (rt4.checked) {
        alert('Выбран 4 пункт');
    }
};


JS сообщает о пункте выбранном по умолчанию, при загрузке страницы, но если изменить выбор - никакой реакции от JS нет.

При этом, в инструкциях которые видел, везде предлагают проверять через checked. Спрашивается... что я делаю не так? Или, чтобы отслеживать выбор в реальном времени - нужно еще событие клика ловить?

Просьба подсказать на понятном новичку языке.

Последний раз редактировалось Walk, 10.10.2017 в 16:41.
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2017, 16:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,477

Сообщение от Walk
Или, чтобы отслеживать выбор в реальном времени - нужно еще событие клика ловить?
Ваше умозаключение верно.
Однако лучше отслеживать событие изменения состояния элемента («onchange»).
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2017, 16:47
Интересующийся
Отправить личное сообщение для Walk Посмотреть профиль Найти все сообщения от Walk
 
Регистрация: 14.08.2017
Сообщений: 28

Сделал так:

<p>
        <input type="radio" name="review_type" value="1" onclick="checkType()" checked> Работе в компании<br />
        <input type="radio" name="review_type" value="2" onclick="checkType()"> Зарплате на должности<br />
        <input type="radio" name="review_type" value="3" onclick="checkType()"> Собеседовании<br />
        <input type="radio" name="review_type" value="4" onclick="checkType()"> Бонусах в компании<br />
    </p>

function checkType() {
    alert(getCheckedRadioValue('review_type'));
}

function getCheckedRadioValue(name) {
    var elements = document.getElementsByName(name);

    for (var i=0, len=elements.length; i<len; ++i)
        if (elements[i].checked) return elements[i].value;
}


Работает, хотя не знаю, на сколько данный способ наилучший.
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2017, 17:04
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,477

Walk, можно упростить:
<input type="radio" name="review_type" value="2" onclick="checkType(*!*this*/!*)">
function checkType(node) {
    alert(node.value);
}
Ответить с цитированием
  #5 (permalink)  
Старый 10.10.2017, 17:51
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<p>
        <input type="radio" name="review_type" value="1"  checked> Работе в компании<br />
        <input type="radio" name="review_type" value="2"> Зарплате на должности<br />
        <input type="radio" name="review_type" value="3"> Собеседовании<br />
        <input type="radio" name="review_type" value="4"> Бонусах в компании<br />
</p>
<script>
   document.querySelector('p').onclick = function(e) {
    alert(e.target.value);
  }
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 04.05.2021, 13:42
Новичок на форуме
Отправить личное сообщение для AngryTom Посмотреть профиль Найти все сообщения от AngryTom
 
Регистрация: 05.12.2016
Сообщений: 9

document.querySelectorAll('input[name="review_type"]:checked')
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вопрос по меню bgraf Элементы интерфейса 9 08.08.2017 03:52
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Как узнать размер загружаемого файла? shkarbatov Серверные языки и технологии 5 14.08.2011 16:12
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 17:14
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 12:55