18.07.2011, 12:16
|
|
Профессор
|
|
Регистрация: 26.04.2011
Сообщений: 472
|
|
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!!".
Подскажите, пожалуйста, в чем ошибся?
|
|
18.07.2011, 12:27
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
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]
Последний раз редактировалось melky, 18.07.2011 в 12:31.
|
|
18.07.2011, 12:47
|
|
Профессор
|
|
Регистрация: 26.04.2011
Сообщений: 472
|
|
Спасибо.
Еще такой вопрос: надо проверить на 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 а не после каждого я не понял...
Подскажите, пожалуйста, как должен выглядеть цикл...
|
|
18.07.2011, 14:06
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
<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>
Последний раз редактировалось melky, 18.07.2011 в 14:09.
|
|
18.07.2011, 14:37
|
|
Профессор
|
|
Регистрация: 26.04.2011
Сообщений: 472
|
|
Спасибо)
|
|
18.07.2011, 15:02
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
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>
|
|
18.07.2011, 15:16
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
я отвечу тебе странностью
извини, меня сегодня просто прёт на 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>
Последний раз редактировалось melky, 18.07.2011 в 15:20.
|
|
19.07.2011, 10:03
|
|
Профессор
|
|
Регистрация: 26.04.2011
Сообщений: 472
|
|
Снова ничего путного у меня не выходит...
Надо сделать такое условие:
Если выбран один из radio - то кнопка в онклике получает переход по ссылке
Если не выбран - по клику срабатывает алерт...
Подскажите, пожалуйста, логику, на основе которой надо код писать, очень хочется хоть от часть свой код наваять и немного самому подумать...
|
|
19.07.2011, 11:40
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
Сообщение от 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>
|
|
19.07.2011, 11:43
|
|
Профессор
|
|
Регистрация: 26.04.2011
Сообщений: 472
|
|
if (s) - это "если s=true"??
|
|
|
|