Ajax :使用chekboxes添加/删除div

Question

我正在为我的实习工作创建一个网页，并且我想在选中名为"example“的复选框时添加一个div "example”。我想在取消选中此div时将其删除。

我真的不知道如何开始，也不知道该怎么做。

编辑: Ok，我明白了。

我有几个复选框，有没有一种方法可以做到这一点？

我在这里创建我的复选框：

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

(它会生成一个带有开关“id=-rdc-7”div )。

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

您应该为Checkbox添加一个onClick()事件，然后确定是否选中该Checkbox。根据设置，您可以显示/隐藏该div的内容。

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