Question

我有许多复选框，当选中时，调用以下脚本，使用.load在表单中显示一大块html：

$('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();
});

选中复选框时.load内容，取消选中时删除

3 个答案: