Управление 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, время: 22:40. |