Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Javascript и Radio (https://javascript.ru/forum/dom-window/18853-javascript-i-radio.html)

Viral 18.07.2011 12:16

Javascript и Radio
 
Здравствуйте!

Что имеем:

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">


Как пытался:
if
(document.getElementsByName('q').checked == true)
  {document.getElementById('w').onclick=function()
    {alert ('Выбор сделан!');}
  }
else
{document.getElementById('w').onclick=function()
  {alert ('Choose your destiny!!');}
}


На выходе хотел получить:
При выборе одного из представленных выше radio и клике по кнопке вылетает "Выбор сделан", если ни один radio не выбран, то при клике вылетает "Choose your destiny!!".

Подскажите, пожалуйста, в чем ошибся?

melky 18.07.2011 12:27

if
(*!*document.getElementsByName('q').checked*/!* == true)
*!*
  {document.getElementById('w').onclick=function()
    {alert ('Выбор сделан!');}
  }
*/!*
else
{document.getElementById('w').onclick=function()
  {alert ('Choose your destiny!!');}
}

  • тут нет обработчика события, тут сразу исполнение скрипта по мере загрузки страницы
  • getElementsByTagName возвратит NodeList*. ВСЕГДА
  • обработчики вешаются правильно, но по коду логика скрипта будет такой : по мере загрузки страницы проверяем у NodeList*, есть ли у него свойство checked (оно undefined), нет? вешаем обработчик на кнопку, который будет выводить сообщение о выборе судьбы.

Пример: Работающий пример
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){

if  (document.getElementsByName('q')[0].checked == true) {
    alert ('Выбор сделан!');
  } else {
      alert ('Choose your destiny!!');
  }
}
</script>

*Примечание :
NodeList похож на массив, потому что имеет свойство length и пронумерованные с нуля найденные элементы, к которым можно обращаться через list[number]

Viral 18.07.2011 12:47

Спасибо.
Еще такой вопрос: надо проверить на check'нутость все radio, соответственно, делать надо циклом...

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){
var z = document.getElementsByName('q'); 
for (var i = 0; i < z.length; i++)
  {
    if  (document.getElementsByName('q')[i].checked == true) {
      alert ('Выбор сделан!');
    } else {
        alert ('Choose your destiny!!');
    }
  }
}
</script>


Я понимаю, что неправильно сделал, но как правильно сделать, чтобы alert срабатывал после обработки всех radio а не после каждого я не понял...

Подскажите, пожалуйста, как должен выглядеть цикл...

melky 18.07.2011 14:06

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){
var z = document.getElementsByName('q'),s='';
for (var i = 0; i < z.length; i++)
  {
    if  (document.getElementsByName('q')[i].checked == true) {
      s = 'Выбор сделан!';
    } else {
        s = 'Choose your destiny!!';
    }
  }
alert(s);
}
</script>


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

наверное, целью было сделать так =>

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){
var z = document.getElementsByName('q'),s='';
for (var i = 0; i < z.length; i++)
  {
    if  (document.getElementsByName('q')[i].checked == true) {
      s = 'Выбор сделан!'; *!*break;*/!*;
    } else {
        s = 'Choose your destiny!!';
    }
  }
alert(s);
}
</script>

Viral 18.07.2011 14:37

Спасибо)

ksa 18.07.2011 15:02

melky, малость подправлю... :)

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){
var z = document.getElementsByName('q'),s='Choose your destiny!!';
for (var i = 0; i < z.length; i++)  {
    if  (z[i].checked) {
      s = 'Выбор сделан!'; break;
    }
}
alert(s);
}
</script>

melky 18.07.2011 15:16

я отвечу тебе странностью :)
извини, меня сегодня просто прёт на call и прототипы массива (извращения).. и на "соперничество"

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){

var s = Array.prototype.every.call( 

                document.getElementsByName('q'),
                function(a){ return !a.checked }

) ? 'Choose your destiny!!' : 'Выбор сделан!';

alert(s);
}
</script>

Viral 19.07.2011 10:03

Снова ничего путного у меня не выходит...

Надо сделать такое условие:

Если выбран один из radio - то кнопка в онклике получает переход по ссылке

Если не выбран - по клику срабатывает алерт...


Подскажите, пожалуйста, логику, на основе которой надо код писать, очень хочется хоть от часть свой код наваять и немного самому подумать...

ksa 19.07.2011 11:40

Цитата:

Сообщение от Viral
Если выбран один из radio - то кнопка в онклике получает переход по ссылке
Если не выбран - по клику срабатывает алерт...

Как вариант...

<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="radio" name="q"><br>
<input type="button" id="w" value="Тык">

<script>
document.getElementById("w").onclick = function(){
var z = document.getElementsByName('q'),s=false
for (var i = 0; i < z.length; i++)  {
    if  (z[i].checked) {
      s = true; break;
    }
}
if (s) {
   top.location='http://javascript.ru/forum/dom-window/18853-javascript-i-radio.html#post114146'
} else {
   alert('Choose your destiny!!');
}
}
</script>

Viral 19.07.2011 11:43

if (s) - это "если s=true"??


Часовой пояс GMT +3, время: 10:05.