Develop Reference

jQuery convert checkbox selections to array ( when unchecked make it empty)

There is a solution here but I have a problem . when check box is checked and unchecked i wanted it to be empty but it results in
{
"category": []
}
but I wanted it to empty {}
const array = {};
$('[name^="pgggo-"]').on('click', function() {
const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
const id = attr.split('[')[0];
const checked = $(this).prop('checked');
array[taxonomy] = array[taxonomy] || [];
const index = array[taxonomy].indexOf(id);
index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
console.log(array);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-list-taxon">
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-56[]">
<div class="icon-box">
<div name="development">Development</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-14[]">
<div class="icon-box">
<div name="food">Food (category)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-home-sep-14[]">
<div class="icon-box">
<div name="food">Food (home)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-8[]">
<div class="icon-box">
<div name="medical">Medical</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-1[]">
<div class="icon-box">
<div name="uncategorized">Uncategorized</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-2[]">
<div class="icon-box">
<div name="wordpress">WordPress</div>
</div>
</label>
</li>
</div>
Please help

well there should be nothing wrong with that. But still if you want to remove the related property, you can use delete object.property to delete it when all the items have been unchecked as following
const array = {};
$('[name^="pgggo-"]').on('click', function() {
const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
const id = attr.split('[')[0];
const checked = $(this).prop('checked');
array[taxonomy] = array[taxonomy] || [];
const index = array[taxonomy].indexOf(id);
index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
if(array[taxonomy].length == 0){
delete array[taxonomy];
}
console.log(array)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-list-taxon">
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-56[]">
<div class="icon-box">
<div name="development">Development</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-14[]">
<div class="icon-box">
<div name="food">Food (category)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-home-sep-14[]">
<div class="icon-box">
<div name="food">Food (home)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-8[]">
<div class="icon-box">
<div name="medical">Medical</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-1[]">
<div class="icon-box">
<div name="uncategorized">Uncategorized</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-2[]">
<div class="icon-box">
<div name="wordpress">WordPress</div>
</div>
</label>
</li>
</div>

Adjust jquery filtering script to run on page reload based on checked checkboxes

I'm working on a filtering script and I need some help.
My question is, how can I check what filters are selected (they remain checked on page reload/going back from a different page) and run the filtering script on page reload?
The page is: https://www.raw-partner.de/wer-wir-sind/team-2/
The user interaction is loading the page - clicking on 'Filter' - selecting the checkboxes/filters user desired - clicking on an entry which redirects to a different page - when going back the same filters must be applied. (note: the previously checked checkboxes remain checked once going back, so the only thing to do is to run the script again)
I can post the script as well.
Any idea on how I can achieve this? Thanks in advance!
HTML:
<ul class="filters box">
<li>
<input name="is-partner" type="checkbox" value="partner" id="partner" />
<label for="partner">Partner</label>
</li>
<li>
<input name="other-job" type="checkbox" value="berufstrager" id="berufstrager" />
<label for="berufstrager"> Berufsträger </label>
</li>
<li>
<input name="other-job" type="checkbox" value="mitarbeiter" id="mitarbeiter" />
<label for="mitarbeiter"> Mitarbeiter </label>
</li>
</ul>
<ul class="filters box">
<li style="font-weight: bold"> Standorte </li>
<li>
<input name="location" type="checkbox" value="munchen" id="munchen" />
<label for="munchen"> München </label>
</li>
<li>
<input name="location" type="checkbox" value="berlin" id="berlin" />
<label for="berlin">Berlin</label>
</li>
<li>
<input name="location" type="checkbox" value="bad-worishofen" id="bad-worishofen" />
<label for="bad-worishofen">Bad Wörishofen</label>
</li>
<li>
<input name="location" type="checkbox" value="gera" id="gera" />
<label for="gera">Gera</label>
</li>
</ul>
<ul class="filters box">
<li style="font-weight: bold"> Partner mit Team </li>
<li>
<input name="parner-team" type="checkbox" value="appelt-duile" id="appelt-duile" />
<label for="appelt-duile"> Appelt/Duile </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="bley" id="bley" />
<label for="bley"> Bley </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="dietrich-kogler" id="dietrich-kogler" />
<label for="dietrich-kogler"> Dietrich/Kögler </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="barth" id="barth" />
<label for="barth"> Dr. Barth </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="buck" id="buck" />
<label for="buck"> Dr. Buck </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="drost" id="drost" />
<label for="drost"> Drost </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="lux-kronig-harbauer" id="lux-kronig-harbauer" />
<label for="lux-kronig-harbauer"> Lux-Krönig/Harbauer </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="metzler" id="metzler" />
<label for="metzler"> Metzler </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="stegmann" id="stegmann" />
<label for="stegmann"> Stegmann </label>
</li>
</ul>
</div>
</div>
<div id="filtering">
<div class="entry" data-id="max-appelt" data-category="partner munchen berufstrager appelt-duile">
<a href="http://www.raw-partner.de/maximilian-appelt-4/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Appelt_P_0613_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Maximilian <br> Appelt</b></h3></a>
</div>
<div class="entry" data-category="partner munchen berufstrager barth">
<a href="http://www.raw-partner.de/dr-hans-guenther-barth/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Barth_P_0187_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Dr. Hans Günther Barth</b></h3></a>
</div>
<div class="entry" data-category="munchen mitarbeiter ">
<a href="http://www.raw-partner.de/katrin-bartl-3/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Bartl_0820_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Katrin <br> Bartl</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter stegmann">
<a href="http://www.raw-partner.de/alexander-baumgaertner-2/"><p><img class="" src="/wp-content/uploads/2018/08/Baumgärtner_0035_F2.png" alt="null" /></p>
<h3 id="name"><b>Alexander <br> Baumgärtner</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">
<a href="http://www.raw-partner.de/margit-baur-3/"><p><img class="" src="/wp-content/uploads/2018/08/Baur_0533_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Margit <br> Baur</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">
<a href="http://www.raw-partner.de/peter-harbauer-3-7/"><p><img class="" src="/wp-content/uploads/2018/08/Bernhardt_0137_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Yvonne <br> Bernhardt</b></h3></a>
</div>
jQuery:
(function($){
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.entry');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.entry').hide().filter($filteredResults).show();
});
$(window).trigger('resize')
})(jQuery);
JSFiddle: https://jsfiddle.net/u39kmoxz/2/
Note: I have a basic understanding of jQuery, not advanced enough to use cookies, I was thinking that since the checkboxes are remaining checked when going back, the only thing that should be done is re-running the script but I can't understand how since the script is being applied on change.

Welcome!
Conceptually, you need to make the function callable from 2 events: change checkbox + page load. Therefore you need to name the function so that you can call it from these 2 events.
(function($){
var $filterCheckboxes = $('input[type="checkbox"]');
var doFiltering = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.entry');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.entry').hide().filter($filteredResults).show();
} // end of doFiltering function
$filterCheckboxes.on('change',doFiltering()); // call it with the on change
doFiltering() // call it when your parent function executes at page load (only executes once)
$(window).trigger('resize')
})(jQuery);

Checkbox like radio button jquery

I have a buch of checkbox in different containers like below:
$("input:checkbox").click(function() {
var url = "http://example.com/results?&"
var flag = false;
var $box = $(this);
var $facet = $box.val();
var $name = $box.attr("name");
var group = "input:checkbox['" + $facet + $name + "']:checked";
console.log(group);
$("#pruebita").not(this).attr("checked", false);
$(group).each(function() {
if (!flag) {
url = url + $(this).val() + $(this).attr('name');
flag = true; // To trace if first query string added
} else {
url = url + "&" + $(this).val() + $(this).attr('name');
}
});
console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle " id="gender">
gender
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">
ocassion
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I want that the checkboxes don't uncheck the previous option when checking another section of checkboxes.
The complete code is also at jsfiddle

In your code you have
$("#pruebita").not(this).attr("checked",false);
Which essentially is unchecking all the checkboxes except the clicked one. Removing this line of code will make it work fine.
See updated fiddle

You don't need any javascript at all for this problem; you just need to use appropriate form elements and set their attributes correctly.
Radio buttons are for when only one of a group of options should be selectable; checkboxes are for when more than one should be selectable. They aren't interchangeable. Do not use javascript to disguise radio button functionality as checkbox elements; that's bad usability, as it gives the user incorrect expectations about how the form will work.
Part of the problem is that you've confused the purpose of the "name" and "value" attributes. The "name" attribute is for defining which group the radio buttons belong to; all radio buttons with the same name will be in the same group. The "value" attribute contains the value that will be submitted as part of the form if that option is selected. You had them backwards:
<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>
With the above code, all the boxes have a unique 'name', so none of them would be grouped; meanwhile the user's selection wouldn't have any effect, since they both have the same value. Instead, that should be this:
<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>
That HTML will cause the form field "gender" to contain the value "women" or "men", depending on the user's selection. Here's the full corrected example:
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle" id="gender">gender</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">ocassion</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>

How to get the correct data value using jQuery

This is my HTML:
<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="4">
<span class="onoffswitch">
<input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="4" checked="checked">
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="5">
<span class="onoffswitch">
<input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="5" >
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
</div>
I'm try to get 2 things, the router_id for the section clicked and the value for the checkbox I clicked on. This is what I've tried thus far:
$('.routerservicestatusswitch').on('click', function (e)
{
var id = $(this).parent('router-template').data('router-id');
var id2 = $(this).siblings('.router-template').data('router-id');
var id3 = $(this).closest('.router-template').data('router-id');
var id4 = $(this).closest('.widget-toolbar').find('.onoffswitch-checkbox').data('router_id');
var id5 = $(this).find(':checkbox').attr('router_id');
var id6 = $(this).find(':checkbox').val();
if ($('#routeronoffswitch').is(':checked') == true)
{
SetRouter(true);
}
else
{
SetRouter(false);
}
});
I've tried different event handlers and they all return the router_id of the first section and never the id for the one I click. Can someone tell me how to get the correct data?

You have duplicated IDs: this is not possible. So you must change them to class or add a suffix in order to make them unique.
Second point: you have:
<div data-router-id="
a "data-router-id" and two: "router_id="" attribute.
You may access them using jQuery#closest and jQuery#data or jQuery#attr. For the data attributes you can use data but for the others you need to use attr:
Moreover, try to use the change event for checkboxes instead of click.
The snippet:
function SetRouter(arg1) {
console.log('SetRouter: ' + arg1)
}
$('.routerservicestatusswitch').on('change', function (e) {
var id1 = $(this).closest('.router-template').data('router-id');
var id2 = $(this).closest('.widget-toolbar').attr('router_id');
var id3 = $(this).attr('router_id');
var id4 = $(this).val();
console.log('id1: ' + id1 + ' id2: ' + id2 + ' id3: ' + id3);
if ($(this).is(':checked')) {
SetRouter(true);
} else {
SetRouter(false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template"
data-widget-colorbutton="false" data-widget-custombutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar1" router_id="4">
<span class="onoffswitch">
<input type="checkbox" id="routeronoffswitch1" class="onoffswitch-checkbox routerservicestatusswitch"
router_id="4" checked="checked">
<label class="onoffswitch-label" for="routeronoffswitch1">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
<div class="widget-toolbar" class="routeronoffswitchtoobar" router_id="5">
<span class="onoffswitch">
<input type="checkbox" id="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch"
router_id="5" >
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
</div>

How to Keep Focus on a Dropdown List?

I have created a multi-select dropdown list. Currently when an input is selected, if the user clicks on the label to make a selection, the dropdown list disappears. If they click on the actual checkbox, the list stays in focus. I'd like to keep focus on the dropdown list until the user is finished making their selections and clicks the Submit button; regardless of where they click inside of the list. I've tried various combinations of click/focus listener functions as well as playing with the Bootstrap data attributes, but nothing seems to work.
function ddInputsChanged($inputs, $outputWrapper) {
var $inputs = $('#ddDistrict input');
var $outputWrapper = $('#lblDistrict');
var outputLabel = 'All';
var firstChecked = true;
$inputs.each(function() {
if (this.checked) {
var currentLabel = $(this).next('label').text();
if (firstChecked == true) {
firstChecked = false;
outputLabel = currentLabel;
} else
outputLabel = outputLabel + ', ' + currentLabel;
}
});
$outputWrapper.text(outputLabel);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="button-group" style="padding: 7px 0px 7px 0px; margin-left: 18px;">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Districts <span class="caret"></span>
</button>
<ul id="ddDistrict" class="dropdown-menu">
<li>
<input type="checkbox" id="inpDist1" value="1">
<label for="inpDist1" class="input small" data-value="1">District 1 (Porter)</label>
</li>
<li>
<input type="checkbox" id="inpDist2" value="2">
<label for="inpDist2" class="input small" data-value="2">District 2 (Jones Jr.)</label>
</li>
<li>
<input type="checkbox" id="inpDist3" value="3">
<label for="inpDist3" class="input small" data-value="3">District 3 (Horne)</label>
</li>
<li>
<input type="checkbox" id="inpDist4" value="4">
<label for="inpDist4" class="input small" data-value="4">District 4 (Haddaway)</label>
</li>
<li>
<input type="checkbox" id="inpDist5" value="5">
<label for="inpDist5" class="input small" data-value="5">District 5 (Duncan)</label>
</li>
<li>
<input type="checkbox" id="inpDist6" value="6">
<label for="inpDist6" class="input small" data-value="6">District 6 (Willner)</label>
</li>
<li>
<input type="checkbox" id="inpDist7" value="7">
<label for="inpDist7" class="input small" data-value="7">District 7 (Brady)</label>
</li>
<li>
<button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddInputsChanged('#ddDistrict input', '#lblDistrict');">Submit</button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="lblDistrict"></div>
</div>
</div>

This seemed to do the trick in a little test. Added stop propagation and added code to close the menu after submit.
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
function ddInputsChanged($inputs, $outputWrapper) {
var $inputs = $('#ddDistrict input');
var $outputWrapper = $('#lblDistrict');
var outputLabel = 'All';
var firstChecked = true;
$inputs.each(function() {
if (this.checked) {
var currentLabel = $(this).next('label').text();
if (firstChecked === true) {
firstChecked = false;
outputLabel = currentLabel;
} else
outputLabel = outputLabel + ', ' + currentLabel;
}
});
$outputWrapper.text(outputLabel);
$(".open").removeClass('open');
}