Display HTML based on user input (via checkbox selection)
You should execute most if not all your code inside the callback for the download click handler. Your code gives you the illusion that it's working because you're setting timeouts. If the user sits idle for longer than the timeouts your script will break.

Consider adding listeners to your checkboxes that bind to a model in your application. This will reduce the amount of dom parsing you have to do manually.

You also have some global variables defined in your script which might interfere with other scripts you've included in your page.

I...didn't test any of this though.

var checkboxPDF = (function($model, $config, $err, $data, $view) { 

    //keeping the pdf config options here will let you determine how you want the pdf to look case by case everytime you use this module. It's how jquery plugins work anyway.
    return function(options) {
        $view.setBg();
        //uses a closure to keep track of the model outside the callback context
        $view.bindToModel($model);
        $view.readyDownload(function() {
            //setting up the pdf is the meat of your business logic
            var pdf = new jsPDF(options.orientation, options.pt, options.size);
            $view.update($model, $data);
            //I'm not entirely sure what is in your records div
            $view.addHtml(pdf);
            //In your code I don't know where the doc variable comes from
            if (doc)
                doc.save(pdf + $config.filename);
            else if (pdf)
                pdf.save(pdf + $config.filename);
            else
                alert($err['not defined']);
        });
    };

})(

//keep your model separate from your controller
{},

//pdf configuration, it can be here because it has nothing to do with your application logic
{ filename: 'test' extension: '.pdf' },

//you can keep your error configuration separate as well
{ 'not defined': 'Error 0xE001BADF' },

//static data here, or you could put this directly into the html and toggle classes between visible/hidden in your view logic.
{
    '#idA': 'item 1 box content: ...',
    '#idB': 'item 2 box content...',
    '#idC': 'item 3 box content...'
    '#idD': 'etc...'
},

//organized methods that are concerned with the view/model
{
    setBg: function() {
        $("#container").css('background', '#fff')
    },
    addHtml: function(pdf, callback) {
        pdf.addHTML(document.getElementById('records'), callback || null);
    },
    bindToModel: function(model) {
        $("input[type=checkbox]").on("click", function(e) {
            model[this.id] = e.target.value;
        });
    },
    readyDownload: function(callback) {
        $('.download-pdf').click(function() {
            callback();
        });
    },
    update: function(model, data) {
        for (var p in model) {
            if (model[p] === true) {
                $(p).show().html(data[p]);
            }
        }
    }
);

checkboxPDF({orientation: 'p', pt: 'pt', size: 'a4'}); //appends your listeners, waits for user to check boxes and downloads pdf once they click on a download handler