VPF::FAQ. Как сделать unselect для radio button

smartov

Дата 19.4.2006, 18:50 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

Код


<html>
<!-- по загрузке body - прикрепить события -->
<body onload="setevents()">

<script type="text/javascript">

//сбда сохраняются состояния
var states = new Array();

//сохранить состояние объекта
function saveState(obj, state)
{
    states[obj.id] = state;
}

//обработка нажатия на radio или на label к нему
function doit(obj)
{
    if (states[obj.id])
    {
        obj.checked = false;
        saveState(obj, false);
    } else {
        obj.checked = true;
        saveState(obj, true);
    }
}

//установка событий всем radio и labels для них
function setevents()
{
    $inputs = document.getElementsByTagName('input');
    $radios = new Array();
    for (var i=0;$inputs[i];i++)
        if ($inputs[i].type == 'radio')
            $radios.push($inputs[i]);
    
    for (var i=0;$radios[i];i++)
    {
        //если мышкой
        $radios[i].onmouseover = function()
        {
            saveState(this, this.checked)
        }
        
        //если клавой
        $radios[i].onfocus = function()
        {
            saveState(this, this.checked)
        }
    }
    
    $labels = document.getElementsByTagName('label');
    for (var i=0;$labels[i];i++)
    {
        //если мышкой
        $labels[i].onmouseover = function()
        {
            saveState(document.getElementById(this.htmlFor), document.getElementById(this.htmlFor).checked)
        }
        
        //если клавой
        $labels[i].onfocus = function()
        {
            saveState(document.getElementById(this.htmlFor), document.getElementById(this.htmlFor).checked)
        }
    }
}


</script>
Group1<br>
<input type="radio" id="radio1" name="radio1name" onclick="doit(this);"><label for="radio1">Group1:1</label><br>
<input type="radio" id="radio2" name="radio1name" onclick="doit(this);"><label for="radio2">Group1:2</label><br>
<input type="radio" id="radio3" name="radio1name" onclick="doit(this);"><label for="radio3">Group1:3</label>
<p></p>
Group2<br>
<input type="radio" id="radio4" name="radio2name" onclick="doit(this);"><label for="radio4">Group2:1</label><br>
<input type="radio" id="radio5" name="radio2name" onclick="doit(this);"><label for="radio5">Group2:2</label><br>
<input type="radio" id="radio6" name="radio2name" onclick="doit(this);"><label for="radio6">Group2:3</label>

</body>
</html>

Тестилось
IE 6.0
FF 1.5.0.1
Opera 9 (глючит при click на label)

Это сообщение отредактировал(а) smartov - 20.4.2006, 11:16

12345c

Дата 19.4.2006, 22:10 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

IE6, до первого притрагивания с onmouseover проблема - строка 60, симв 13 - null или не объект, FF1.06 - то же самое.

Добавлено: однако, везде работает, несмотря на ошибки, и с клавишами тоже.

Пример вдохновил (нет, сподвиг) на написание поддержки клавиш тоже в своём примере, хотя надобности в этом исчезающе мало.

Код переключателя радиокнопок:

Код

<form action=# name=f2 id=fid2>
    <input type=radio id=s1 name='radio_1' value='1'>1 
    <input type=radio id=s2 name='radio_1' value='2'>2 
    <input type=radio id=s3 name='radio_1' value='3'>3<br>
    <input type=radio id=s4 name='radio_2' value='4'>4 
    <input type=radio id=s5 name='radio_2' value='5'>5 
    <input type=radio id=s6 name='radio_2' value='6'>6<br>
    <input type=radio id=s7 name='radio_3' value='7'>7 
    <input type=radio id=s8 name='radio_3' value='8'>8 
    <input type=radio id=s9 name='radio_3' value='9'>9<br>
    <input type=radio id=s10 name='radio_4' value='10'>10
    Сумма: <input name=i1 size=6 value=0 onfocus=this.form.elements[0].focus()>
</form>
<script>
d=document;g=function(a){return d.getElementById(a);}
fn=function(ev){t=d.all?event.srcElement:ev.target;if(d.all)ev=event;
    if(t.tagName!='INPUT'||t.type!='radio')return;
    if(ev.type==(d.all?'keydown':'keypress')&&ev.keyCode!=32)return;
t.setAttribute('clicked',t.checked=t.getAttribute('clicked')!=null?
    1-t.getAttribute('clicked'):1);
l=document.getElementsByTagName('INPUT').length;
s=0;
for(i=0;i<l;i++){o=null;
    s+=Number((o=document.getElementsByTagName('INPUT')[i]).id.charAt(0)=='s'
        &&o.checked?o.value:0);
    if(o&&t.id!=o.id&&o.id.charAt(0)=='s')
        {o.setAttribute('clicked',o.checked?1:0);}
}t.form.i1.value=s;
if(ev.keyCode==32){if(d.all)ev.returnValue=!1;else ev.stopPropagation();}
}
g('fid2').onclick=fn;
if(d.all&&!self.opera)g('fid2').onkeydown=fn;g('fid2').onkeypress=fn;
</script><b>Кнопочное управление</b>:<br>
Tab - Shift-Tab - между группами кнопок(IE)/кнопками(FF,Opera);<br>
<- - -> - между кнопками в группе(IE,Opera);<br>
пробел - вкл/выкл. кнопки .<br>

Здесь, в отличие от примера с классом для радиокнопок, признак "класса" есть первая буква "s" в id радиокнопки (вариант для того, чтобы меньше писать кода в тегах).

Демонстрация здесь: http://js2.ru/example/JsPrimery...8.htm?xmp=078_4

Пример поучителен для демонстрации разнобоя в интерфейсах браузеров для кнопочного управления выделением кнопок. Самое оригинальное управление в Опере, когда таб одновременно перебирает и включает кнопки с перебором комбинаций. Одна вотчина разнобоев, это, как известно, размеры объектов и окон, а здесь оказалась тоже полянка непаханная.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 15:19

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

smartov

Дата 20.4.2006, 11:17 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

12345c,

Цитата(12345c @ 19.4.2006, 21:10

)

IE6, до первого притрагивания с onmouseover проблема - строка 60, симв 13 - null или не объект, FF1.06 - то же самое.

Да. Пропустил ошибочку. Исправил.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »