Переключение div-блоков с помощью radio кнопок
Мне собственно нужно сделать переключатель div-блоков с помощью radio intu-ов.
Нашел вот такой пример реализации: <script type="text/javascript"> function showOrHide(cat1, cat2, cat3) { cat1 = document.getElementById(cat1); cat2 = document.getElementById(cat2); cat3 = document.getElementById(cat3); cat1.style.display = "block"; cat2.style.display = "none"; cat3.style.display = "none" } </script> <td><input type = "radio" id = "cb1" onclick = "showOrHide('cat1', 'cat2','cat3');" name="oplata" value="0"> Доллар </td> <td><input type = "radio" id = "cb2" onclick = "showOrHide('cat2', 'cat1', 'cat3');" name="oplatat" value="1"> Рубль</td> <td><input type = "radio" id = "cb3" onclick = "showOrHide('cat3', 'cat1','cat2');" name="oplata" value="3"> Гривна</td> </tr> <div id = 'cat1' style = 'display: none;'>1</div> <div id = 'cat2' style = 'display: none;'>2</div> <div id = 'cat3' style = 'display: none;'>3</div> Проблема в том, что при выборе одного radio-кнопки всегда остаются две активные кнопки. На сколько я понимаю это из-за того что используется showOrHide, который поддерживает только два положения. Подскажите пожалуйста как это правильно реализовать. |
Вы ведь буквально недавно породили тему по сути ничем не отличающую от этой, разница лишь в другом наборе html-элементов, при этом использовалась jQuery. Для чего же вы подключаете эти десятки КБ, если не используете их?
Есть такая замечательная вещь как индекс в наборе, это и массив, это и коллекция элементов, что тоже является по сути массивом. Так вот, эта замечательная вещь позволяет работать с набором, скажем так - анонимно. Мы даже можем не знать всех потрохов каждого элемента из этого набора, но при этом обратиться к каждому элементу набора проблемы не будет. То есть, если у вас есть один набор элементов, который надо связать с другим набором, то единственное условие, которое необходимо соблюдать для их связи, это соответствие индексов коллекций элементов в каждом из наборов. В контексте DOM это означает, что ваши элементы div должны быть расположены на странице с той же последовательностью, как и радио кнопки, с которыми эти div надо связать. Тогда все просто: <!DOCTYPE HTML> <html> <head> <style> #secondary div { display: none; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function() { $('#primary').on('click', 'input:radio', function() { //обрабатываем события радио кнопок $('#secondary div').hide() //скрыть все div .eq($(this).index()) //получить div связанный по индексу радио кнопки .show() //сделать этот div видимым }) }); </script> </head> <body> <div id="primary"> <input type="radio" name="as" checked="" /> <input type="radio" name="as" /> <input type="radio" name="as" /> </div> <div id="secondary"> <div style="display:block">DIV 1</div> <div>DIV 2</div> <div>DIV 3</div> </div> </body> </html> |
Часовой пояс GMT +3, время: 22:57. |