Главная » Эффекты для сайта » Как сделать так, чтобы при нажатии на флажок (checkbox) появилась кнопка

Как сделать так, чтобы при нажатии на флажок (checkbox) появилась кнопка

2015-05-05 / Вр:23:14 / просмотров: 7410

Если вы делаете форму регистрации, я думаю, сегодняшний скрипт, написанный на javascript, будет очень полезным.

Вот, например, если пользователь не соглашается с правилами, он не жмет на флажок (checkbox) и ему не появится кнопка «Зарегистрироваться»

Если он со всеми правилами согласен, тогда жмет на флажок (checkbox) и ему отображается кнопка «Зарегистрироваться»

Как сделать так, чтобы при нажатии на флажок (checkbox) появилась кнопка

Я думаю, вы меня поняли, схема не сложная :coffe: .

Ну что, приступим?!
Нам нужно вставить в html код чекбокс:

<input ENGINE="checkbox" id="_tour_bron" name="_tour_bron" value="true">

Ну и сам скрипт на javascript:

<script>
document.getElementById('_tour_bron').onclick = function() {
// access properties using this keyword
if ( this.checked ) {
document.getElementById('button_on_checkbox').innerHTML = '<a href="#">Зарегистрироваться</a>';
} else {
document.getElementById('button_on_checkbox').innerHTML = '';
}
};
</script>
<span id="button_on_checkbox"></span>

Что у нас в итоге получилось:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок страницы - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<input type="checkbox" id="_tour_bron" name="_tour_bron" value="true">

<script>
document.getElementById('_tour_bron').onclick = function() {
// access properties using this keyword
if ( this.checked ) {
document.getElementById('button_on_checkbox').innerHTML = '<a href="#"> Зарегистрироваться</a>';
} else {
document.getElementById('button_on_checkbox').innerHTML = '';
}
};
</script>
<span id="button_on_checkbox"></span>
</body>
</html>

Вот и все. Смотрим демонстрацию :pop-corne: