BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

Как сделать так, чтобы при нажатии на флажок (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:

[просмотреть демонстрацию]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573