mercredi 30 août 2017

Add value, text and state to array for all checkboxes within a div

I would like to get and add the value, text and state of a checkbox to an array in order to convert to json.

The generated html looks like this.

<div id="utilityMultiSelect" class="col-lg-3">
    <div class="widgetMultiSelect form-control multiselect-checkbox" style="height: auto; border: solid 1px #c0c0c0; display: inline-table; width: 100%;">
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-127">Heat and steam</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-26">Diesel</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-19">Gas</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-16">Water</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-10">Energy</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-1">Electricity</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="1">Natural Gas</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="8">_Costs</label>
    </div>
</div>

I've got the following so far..

$("#searchForm").on('submit', function () {
        //get checkboxes for div and map to array with value, text and state
        var selectedUtilities = $('#utilityMultiSelect input:checkbox')
            .map(function () {
                return
                //$(this).val()
                //$(this).is(':checked');
            }).get();

I can return the value or state, how do I transform it similar to a selectlistitem with a value, text and selected? Is there a nice way of doing so with jQuery or using underscorejs?




Aucun commentaire:

Enregistrer un commentaire