Ajax: добавить / удалить div, используя чекбоксы

Question

Я создаю веб-страницу для моей стажировки и хочу добавить div "example", когда установлен флажок с именем "example".Я хочу удалить этот div, когда он не отмечен.
Я действительно не знаю, как начать и что делать.

Редактировать: Хорошо, я вижу.
У меня есть несколько флажков, есть ли способ сделать это для всех?

Здесь я создаю свои флажки:

my %labels = (
        'rdc7' => 'switch-rdc-7',
        'rdc8' => 'switch-rdc-8',
        'rdc4' => 'switch-rdc-4',
        '3750' => 'switch-3750' 
      );

    print $cgi->checkbox_group(
        -name => 'switch_choices',
        -values => ['rdc4', 'rdc7', 'rdc8', '3750'],
        -default => ['rdc7', 'rdc8'],
        -labels => \%labels
    );

И когда это проверено, я хочу добавить div следующим образом:
my $switch1 = SwitchGUI->new("switch-rdc-7", 24, 2);
(он производит div с id = "switch-rdc-7").

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<script>
    $('input:checkbox').change(function(){
        if( $(this).is(':checked') ){
            $(this).after( $('<div class="example_text">Example</div>') );
        }else{
            $(this).next('.example_text').remove();
        }
    });
</script>

Answer 2

Вы должны добавить событие onClick () для флажка, а затем определить, установлен флажок или нет. В зависимости от настроек, вы можете показать / скрыть содержимое этого раздела.

Вам потребуется использовать AJAX, если вы собираетесь получить его с сервера.