Question

My goal is to get all the HTML on a page except those which checkboxes are unchecked and post it to a script.

I do this by having checkboxes with a value which is a class on an element. For example my checkbox is in a row on a table and that …

All the content I want is inside #page_content. As the content isn’t aware of it’s container – that is the checkbox doesn’t know it’s inside of the table so can’t wrap around it, I figured it’s easier to get everything on the page and just remove the elements that are unchecked. That way my markup is correct.

I am using jQuery to do this, but I don’t know how to approach it correctly. The way I have in mind is to get all the unchecked checkboxes and store their values into a variable ‘unchecked’.

I have an outerHTML() function that can get me the element and it’s html.

Then I

$('#export').click(function(e) {
        e.preventDefault();
        var uc, unchecked = [], html;
        $('input:checkbox:not(:checked)').each(function() {
            unchecked.push("." + $(this).val());
        });
        uc = unchecked.join(',') + ",.actions,input,button,.btn";
        console.log(uc);
        $('#page_content').find('*').not(uc).each(function() {
            html += $(this).outerHTML();
        });
        console.log(html);
        // $('#export-data').val(html);
        // console.log($('#export-data').val());
    });

Then by the end of it I have this string of all the HTML.

Update: Worked a bit more on it, I get something but it’s mixed tags. Also I want to stript out inputs and buttons and other classes so I think I’m doing it right but the output has many duplicates. Hmmm….

Answer 1

Ok using my method I found it clearer and more jquery-ish 🙂

var filter, html, el, unchecked = [], additional, elements;
$('input:checkbox:not(:checked)').each(function() {
    unchecked.push("#" + $(this).val());
});
// We remove checkboxes, cb colums, inputs, etc
additional = ".actions,input,button,.btn,textarea,.cb";
if (unchecked.length) {
    filter = unchecked.join(',') + "," + additional;
} else {
    filter = additional;
}
var $elements = $('#page_content').clone();
$elements.find(filter).remove();
html = $elements.outerHTML();