How Can I Use Jquery To Create A Csv Of All Checked Checkboxes Associated Text?

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 anot

Solution 1:

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

Solution 2:

You need to loop through all of the checkboxes, see which ones are checked, get the value, then add it to 'deptsSelected'. You also need to check to make sure the current checkbox is not 'chkbxSelectAll'. You will need to do this both when selecting all or selecting single.

      $('input[type=checkbox]').each(function () {
            if (this.checked && this.id != "ckbxSelectAll") {
                 deptsSelected +=   $("label[for='" + this.id + "']").text() + ',';
            }
        });

Rough Demo: http://jsfiddle.net/yFB6W/6/

Solution 3:

Here is fully working JSFiddle example hopefully demonstrating what you're after.

Here are some handy functions to find what the state of the checkboxes are in.

var checkedResults = $(".value.option").map(function (i, e) {
    return $(e).prop("checked");
}).get();
var areAllChecked = checkedResults.reduce(function (seed, value) {
    return seed && value;
}, true);
var areSomeChecked = checkedResults.reduce(function (seed, value) {
    return seed || value;
}, false);

To actually print the values of the checkboxes I added data attributes (data-value) to the checkboxes.

<inputtype="checkbox"class="value option" data-value="2"id="ckbx2" />
<inputtype="checkbox"class="value option" data-value="3"id="ckbx3" />

Which I can then access like this.

// Get an array with all the selected valuesvar result = $(".value.option:checked").map(function (i, e) {
  return $(e).attr("data-value");
}).get();

// Print the valuesconsole.log("Change", result);

// Or stringify the array and add it to the page
$("#result").text(JSON.stringify(result));

In the JSFiddle example I changed the detection and update part of your code.

$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });

    functionreportChange() {
        var result = $(".value.option:checked").map(function (i, e) {
            return $(e).attr("data-value");
        }).get();
        console.log("Change", result);
        $("#result").text(JSON.stringify(result));
    }

    $("#ckbxSelectAll").click(function () {
        var isChecked = $("#ckbxSelectAll").prop("checked");
        if (isChecked) {
            $(".value.option").prop("checked", isChecked);
            $("#ckbxDeselectAll").prop("checked", false);
        }
        reportChange();
    });
    $("#ckbxDeselectAll").click(function () {
        $(".value.option, #ckbxSelectAll").removeAttr("checked");
        reportChange();
    });
    $(".value.option").click(function () {
        var checkedResults = $(".value.option").map(function (i, e) {
            return $(e).prop("checked");
        }).get();
        var areAllChecked = checkedResults.reduce(function (seed, value) {
            return seed && value;
        }, true);
        var areSomeChecked = checkedResults.reduce(function (seed, value) {
            return seed || value;
        }, false);
        $("#ckbxDeselectAll").prop("checked", !areSomeChecked);
        $("#ckbxSelectAll").prop("checked", areAllChecked);
        reportChange();
    });
});