How can I use jQuery to create a csv of all checked checkboxes associated text?


Tags: jquery,html,css,jquery-ui

Problem :

I got most of the way to what I need with an answer to my question here: How can I get the value of labels associated with checkboxes (and did I break jsfiddle)?

...but I have another related question, namely, "How can I use jQuery to create a csv of all checked checkboxes associated text?"

What I've got so far, with the missing piece commented, is here: JS fiddler link

The HTML is:

<button id="btnDept">select Depts</button>
<div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
    <div>
        <section class="breakAfter">
            <label for="ckbxSelectAll">Select All</label>
            <input type="checkbox" id="ckbxSelectAll" />
            <label for="ckbxDeselectAll">Deselect All</label>
            <input type="checkbox" id="ckbxDeselectAll" />
        </section>
        <label for="ckbx2">2</label>
        <input type="checkbox" id="ckbx2" />
        <label for="ckbx3" id="lbl3">3</label>
        <input type="checkbox" id="ckbx3" />
    </div>
</div>

The CSS is:

.breakAfter {
    display:block;
}

The jQuery is:

var deptsSelected = '';
$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });
    $("input:checkbox").click(function () {
        var checkedVal = $("label[for='" + this.id + "']").text();

        if (checkedVal == "Select All") {
            $(":checkbox").prop("checked", true);
            $("#ckbxDeselectAll").prop("checked", false);
            // How can I add all of the vals to deptsSelected (except "Select All" and "Deselect All")? 
        } else if (checkedVal == "Deselect All") {
            $(":checkbox").prop("checked", false);
            $("#ckbxDeselectAll").prop("checked", true);
            deptsSelected = '';
        } else {
            if (deptsSelected.indexOf(checkedVal) < 0) {
                deptsSelected += $("label[for='" + this.id + "']").text() + ',';
            }
        }
        alert(deptsSelected);
    });
});

IOW, I need to loop through, I would think, all label elements, appending their text value and a comma (and then lop the final comma off the end).

UPDATE

I updated the jsfiddle to include all the checkboxes I will need:

I created the rest of the checkboxes in a C# utility:

private void button1_Click(object sender, EventArgs e)
{
    string s = string.Empty;
    for (int i = 4; i < 100; i++)
    {
        s += string.Format("<label for=\"ckbx{0}\">{0}</label><input type=\"checkbox\" id=\"ckbx{0}\" />", i);           
    }
    textBox1.AppendText(s);
}


Solution :

You can use the join function to generate the csv from the map of checked checkboxes excluding the 'Select All' checkbox.

Following is what you can do:

deptsSelected = $.map($(':checkbox:not(#' + this.id + '):checked'), function(elem, index) {
    return $("label[for='" + elem.id + "']").text();
}).join(',');

And here is the fiddle that shows this: http://jsfiddle.net/BaKYh/

Here are the documentation for the two new functions I've used:

map(): http://api.jquery.com/jQuery.map/

join(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join


    CSS Howto..

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    How to align buttons properly in css/asp.net?

    css - how to get (responsive) li's with the same height when they have a different width?

    how to vertical align div elements using CSS?

    How to apply a class in the current slide using bxslider?

    CSS how to target background and make it transparent

    how to 3D rotate a 'a' tag?

    Behavior/Styling Separation - How to use IDs, classes and custom attributes for CSS and JavaScript?

    How is CSS/HTML Rendered In Browsers?

    How to apply first-child:first-letter to only one section?

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    How to center webpage content

    CSS selectors: how to make element hovering change wrapper's style

    Colorbox's overlay not showing

    How to add 10 pixels to a dynamic top position in CSS using SASS

    How to force inline-block wrap to new line using CSS or jQuery?

    How to inject a css class into an MvcHtmlString?

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    How do I change the arrow in the select with Chosen plugin?

    How do I assign styling to a Javascript variable?

    How to convert an image for a website menu button into CSS

    How can I avoid div overflowing my container without using overflow:hidden?

    How to achieve cellpadding with divs or likeiwse?

    How do I make my lightbox not scroll?

    How to rearrange these elements with CSS?

    How to make the gif photo to be same width as the table?

    How to have an asp.net ajax control automatically reference css files

    How do I target only elements that are followed by another (specific) element?

    How to create a medal in css [closed]

    how to avoid bullets showing in main menu