Javascript-форум - Помогите в войне с checkbox`сами

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Помогите в войне с checkbox`сами (https://javascript.ru/forum/misc/34667-pomogite-v-vojjne-s-checkbox%60sami.html)

Помогите в войне с checkbox`сами

Всем приятного дня!

Наставьте на путь как это лучше сделать.

Есть форма

<form>
<input type="checkbox" name="chk1">
<input type="checkbox" name="chk2">
<input type=button value="Далее">
</form>
Необходимо что бы при выборе первого checkbox и нажатии далее он присваивал<br> scr2.style.display='block';
и
scr1.style.display='none';
при выборе второго:
scr3.style.display='block';
и
scr1.style.display='none';
если выбраны оба выдавал алерт

Цитата:

Сообщение от Platypus (Сообщение 227221)

вот пока до чего додумался:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language=javascript>
function validate(chk){
  if (chek1.checked == 1 && chek2.checked == 0)
    scr2.style.display='block';
  else if (chek2.checked == 1 && chek1.checked == 0)
    scr2.style.display='block';
  else if (chek1.checked == 1 && chek2.checked == 1)
    alert("Необходимо выбрать одно поле.")
  else 
  alert("Выбирите поле.")
   ;
}
</script>
</head>
<body>
<div id="scr1">
<form>
<input id="chek1" type="checkbox" name="chk1">
<input id="chek2" type="checkbox" name="chk2">
<input class="bot1" style="" type=button value="Далее" onclick="return validate(chk1);">
</form>
<div id="in1"><img src="pic/1.jpg" width='1899px'></div>
</div>
<div id="scr2">
<div id="in1"><img src="pic/2.jpg" width='1899px'></div>
</div>
</body>
</html>

Вопрос как сделать что бы он скрывал scr1.style.display='none';??

var chk1 = document.querySelector('input[name="chk1"]');
var chk2 = document.querySelector('input[name="chk2"]');

var next = document.querySelector('#button-next');

next.addEventListener('click', function(e){

if (chk1.checked && chk2.checked) {
    alert ('wtf?');
    return false;
}

if (!chk1.checked && !chk1.checked) {
    alert ('wtf2?');
    return false;
}

scr1.style.display='none';
if (chk1.checked) {
    scr2.style.display='block';
} else {
    scr3.style.display='block';
}

});

Цитата:

Сообщение от danik.js (Сообщение 227223)

var chk1 = document.querySelector('input[name="chk1"]');
var chk2 = document.querySelector('input[name="chk2"]');

var next = document.querySelector('#button-next');

next.addEventListener('click', function(e){

if (chk1.checked && chk2.checked) {
    alert ('wtf?');
    return false;
}

if (!chk1.checked && !chk1.checked) {
    alert ('wtf2?');
    return false;
}

scr1.style.display='none';
if (chk1.checked) {
    scr2.style.display='block';
} else {
    scr3.style.display='block';
}

});

Скажи пожалуйста а в этом случае в
<input type=button> что необходимо указать?

<input id="button-next" type="button" />

и скрипт ниже формы, а не в head. Или можно оставить там же, но навесить на событие DOMContentLoaded

Сделал немного по другому но код danik.js, помог додуматься как!)