Управление checkboxами
Есть задача: по нажатию на один и тот же чекбокс блок болжен появляться и исчезать... Я могу только реализовать на появление при заданном этому блоку стиля display:none;
Вот код таго, что у меня получается:
function children_hidden(input) {
var input_checked = input.form.type_demand;
var div_children = document.getElementById('children');
for (i = 0; i < input_checked.length; i++) {
if (input_checked[i].checked) {
div_children.style.display = 'block';
}
}
}
Вот HTML:
<div class="type" id="type">
<input type="checkbox" name="type_demand" id="small" onclick="children_hidden(this)" />
<label for="small">Для самых маленьких (1,4-4 года)</label>
</div>
<div class="children" id="children">
<p><input type="checkbox" name="name_child" id="children_1" onclick="register()" />
<label for="children_1">Ivanov Gleb</label></p>
<p><input type="checkbox" name="name_child" id="children_2" onclick="register()" />
<label for="children_2">Ivanova Polina</label></p>
<p><input type="checkbox" name="name_child" id="children_3" onclick="register()" />
<label for="children_3">Ivanova Margarita</label></p>
<p><input type="checkbox" name="name_child" id="children_4" onclick="register()" />
<label for="children_4">Ivanov Aleksander</label></p>
</div>
Т.е. первоначально блок <div class="children" id="children"></div> скрыт; по нажатию на <input type="checkbox" name="type_demand" id="small" onclick="children_hidden(this)" /> блок должен появиться. При повторном нажатии, блок должен опять исчезнуть... Помогите пожалуйста... |
Можно проще:
<input type="checkbox" name="type_demand" id="input" />1
<div id="div"></div>
<style type="text/css">
div {background: red; display: none; width: 100px; height: 100px;}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('div');
document.getElementById('input').onclick = function(){
div.style.display = (div.style.display == '') ? 'block' : '';
};
};
</script>
|
| Часовой пояс GMT +3, время: 07:58. |