Форум

Platypus · #1 (**permalink**) 14.01.2013, 15:15

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

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

Есть форма

<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 · #2 (**permalink**) 14.01.2013, 15:35

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

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

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

Есть форма

<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';
если выбраны оба выдавал алерт

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

<!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';??

danik.js · #3 (**permalink**) 14.01.2013, 15:36

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';
}

});

Platypus · #4 (**permalink**) 14.01.2013, 15:46

Сообщение от danik.js

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> что необходимо указать?

danik.js · #5 (**permalink**) 14.01.2013, 16:04

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

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

Platypus · #6 (**permalink**) 14.01.2013, 16:21

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

Форум

Справочник

Discord чат

Курсы javascript