Javascript Ajax：使用复选框添加/删除div

我正在为我的实习创建一个网页，我想在选中名为“example”的复选框时添加一个div“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 by:

my$switch1=SwitchGUI->new（“switch-rdc-7”，24，2）

（它会生成一个id为=“switch-rdc-7”的div）。
您应该为复选框添加onClick（）事件，然后确定是否选中该复选框。根据设置，您可以显示/隐藏该div的内容

如果要从服务器获取AJAX，则需要使用AJAX。

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

$（'input:checkbox'）.change（function（）{
如果（$（this）.is（':checked'））{
$（this）.after（$（'Example'））；
}否则{
$（this）.next（'.example_text'）.remove（）；
}
});
没有必要仅仅为了显示/隐藏div而引入对JQuery的依赖。JQuery是一个非常常见的包。他并没有说，在没有行业标准javascript库的情况下，需要实现它。人们编写库是有原因的。也许不是，但很可能这不是页面上唯一的javascript，加上来自Google CDN的服务意味着脚本可能已经被潜在的用户小问题缓存，.after（）在复选框附近添加，如何添加到正文或特定div中？您需要选择它。。。例如：$（'specific_div_id'）。追加（$（'Example'）；看见