Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Управление checkboxами (https://javascript.ru/forum/misc/12699-upravlenie-checkboxami.html)

kolomiets.web-art 29.10.2010 16:52

Управление 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)" /> блок должен появиться. При повторном нажатии, блок должен опять исчезнуть... Помогите пожалуйста...

monolithed 29.10.2010 18:47

Можно проще:

<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.