javascript - . 选中复选框时加载内容，未选中时删除

Question

我有许多复选框，检查后调用下面的脚本以使用以下方式显示表单内的HTML块.load。

$('input.article').click(function(){
        var bits = $(this).attr('id').split('_');
        var id = bits[1];
        var article = 'article_' + id + '.html';
        $('#form_' + id).load('<?php echo base_url(); ?>assets/html/' + article);
        $('#form_' + id).toggle();
        $('.submit').show();
    });

表单是在视图中动态创建的，如下所示：

<?php for($i = 1; $i <= 8; $i++){ ?>
        <div id="form_<?php echo $i; ?>" class="hide">
       </div>
<?php } ?>

但是，每当未选中复选框时，我都需要删除加载的 html ，这就是我卡住的地方。使用.toggle()html 是隐藏的，但无论如何它都会被提交。知道如何实现这一目标吗？

Answer 1

尝试这个 -

$('input.article').click(function(){
        var bits = $(this).attr('id').split('_');
        var id = bits[1];
        var article = 'article_' + id + '.html';
        if(this.checked){
          $('#form_' + id).load('<?php echo base_url(); ?>assets/html/' + product);
        }
        else{
          $('#form_' + id).empty();  
        }
        $('.submit').show();
});

Answer 2

所以添加一个检查，看看它是否被选中。如果不是，则清空其内容并将其隐藏。

var bits = $(this).attr('id').split('_');
var id = bits[1];
if (this.checked) {
    //...get content
} else {
    $('#form_' + id).empty().hide();
} 

Answer 3

仅在容器为空时加载内容，并根据复选框是否选中来切换容器：

$('input.article').on('change', function(){
    var id      = $(this).attr('id').split('_')[0],
        article = 'article_' + id + '.html',
        form    = $('#form_' + id);

    if (form.is(':empty'))
        form.load('<?php echo base_url(); ?>assets/html/' + article);

    form.toggle(this.checked);
    $('.submit').show();
});