Показать сообщение отдельно
  #2 (permalink)  
Старый 17.07.2018, 23:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

kyivprogs,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
    .onediv,.twodiv,.threediv{
        display: none;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector("form");
    text = ["я окно Див1","я окно Див2","я окно Див3"];
    form.addEventListener("click", function rating(event) {
        var check = form.querySelector(":checked"),
            indexChecked = [].indexOf.call(form.querySelectorAll('[name="radiob"]'), check);
        if (indexChecked != -1) {
            var divs = form.querySelectorAll("div");
            [].forEach.call(divs, function(div, i) {
                div.style.display = i > indexChecked ? "" : "block"
            });
            if (event.target.type == "button") {
            alert(text[indexChecked]);
            //form.removeEventListener("click", rating)
            }
        }
    })
});
</script>
</head>
<body>
<form>
<input type="radio" name="radiob"  id="one"/><label for="one">1</label><br/>
<input type="radio" name="radiob"  id="two"/><label for="two">2</label><br/>
<input type="radio" name="radiob"  id="three"/><label for="three">3</label><br/>
<div class="onediv" id="onediv">див1</div>
<div class="twodiv" id="twodiv">див2</div>
<div class="threediv" id="threediv">див3</div><br/>
<input type="button" value="ok" id="ok_button">
</form>
</body>
</html>

Последний раз редактировалось рони, 18.07.2018 в 01:15.
Ответить с цитированием