Javascript-форум - Работа с невидимыми радиобатонами

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Работа с невидимыми радиобатонами (https://javascript.ru/forum/dom-window/28792-rabota-s-nevidimymi-radiobatonami.html)

Работа с невидимыми радиобатонами

Подскажите, пожалуйста, есть вот такой незамысловатый код

Код:

<style type="text/css">

ul{

        list-style:none;

        margin:0;

        padding:0

}

li{

        display:block;

        float:left;

        width:150px;

        height:30px;

        margin:0;

        padding:0;

                margin-right:10px;

}

.radio{

        display:none;

}

label{

        display:block;

        height:30px;

        width:150px;

        text-align:center;

        background-color:#00F;

}



</style>

<script type="text/javascript">

function testRadio(){

        var input = document.getElementsByTagName("INPUT");

        for(i=0; i<input.length;i++){

                input.item(i).parentNode.style.backgroundColor = "#00F";

        }

        this.parentNode.style.backgroundColor = "#F00";

        alert(this.value);

}

window.onload = function(){

        var input = document.getElementsByTagName("input");

        for(i=0; i<input.length;i++){

                input.item(i).onclick = testRadio;

        }

}

</script>

...

<ul>

            <li>

             <label for="RadioGroup1_0">

                   <input type="radio" class="radio" name="RadioGroup1" value="Радио1"

 id="RadioGroup1_0"/>Переключатель1

            </label>

        </li>

        <li>

             <label for="RadioGroup1_1">

                   <input type="radio" class="radio" name="RadioGroup1" value="Радио2"

 id="RadioGroup1_1"/>Переключатель2

            </label>

        </li>

</ul>

Хотелось бы организовать некое меню с помощью невидимых радиобатонов, так как особенности их работы очень удобны. Однако в ie 7, ie 8 данная штука не работает, можно ли это обойти? желательно без jquery

Цитата:

Сообщение от leonid12345

Попробуйте невидимость делать не display:none а
position:absolute; z-index:-2000;

Цитата:

Сообщение от Deff (Сообщение 178354)

Попробуйте невидимость делать не display:none а
position:absolute; z-index:-2000;

Так работает! Спасибо вам ОГРОМНОЕ!

Возникла еще небольшая проблема с данным кодом...
если вместо текста внутри label картинка вместо текста, аля

<li>
             <label for="RadioGroup1_1">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио2"
 id="RadioGroup1_1"/><img src="test.png">
            </label>
        </li>

то при нажатии в область картинки в ie7, ie8 событие у радиобаттона онклик не срабатывает(
подскажите, как это можно обойти без сильной модификации кода

leonid12345,
Полный css нарисуйте для этого кода

вот что-то такое

Код:

<style type="text/css">

ul{

        list-style:none;

        margin:0;

        padding:0;

}

li{

        display:block;

        float:left;

        width:150px;

        height:30px;

        padding-right:10px;

        padding-bottom:10px;

        padding-top:10px;

        text-align:center;

}

li label{

        display:block;

        width:150px;

        height:30px;

        background-image:url(/images/butt3.png);

        background-repeat:no-repeat;

        background-position:center;

}

.radio{

        position:absolute;

        z-index:-2000;

}

</style>

ну то есть можно было бы второй фон добавить к li, к примеру, но это не очень удобно, мне кажется, так как кнопки создаются php-скриптом по количеству записей в таблице бд и в img втыкается картинка из соответствующей записи...

Хотя можно и 2 фоном вместо Img, но хотелось бы узнать, может быть можно как-то по-другому

leonid12345, Пробуйте добавить Id к батону и переддать ему клик сквозь картинку

<img src="test.png" onclick="document.getElementById('id').click()">

Спасибо! Даже не подозревал, что так можно!