The following code adds checkbox values to an array when checkboxes are checked. How can I change this so that a checkbox's value is removed from the array when a checkbox is unchecked?
var departments = [];
$("input[name='department_pk[]']").change(function() {
$("input[name='department_pk[]']:checked").each(function(i){
departments[i] = $(this).val();
});
});
The problem is you are not removing the previously selected items from the array. Assume you have selected 5 items now in the array you have data for indexes 0 to 4, then you are unselecting 2 items now your each loop will reset the indexes 0 to 2 but the indexes 3 and 4 is still present in the array. that is the problem.
A better solution will be is to create a fresh array using .map()
var departments = [];
$("input[name='department_pk[]']").change(function () {
departments = $("input[name='department_pk[]']:checked").map(function (i) {
return $(this).val();
}).get();
});
I would clear the array first before you add new elements to it.
var departments = [];
$("input[name='department_pk[]']").change(function() {
departments = [];
$("input[name='department_pk[]']:checked").each(function(i){
departments[i] = $(this).val();
});
});
check this..
var departments = [];
$("input[name='department_pk[]']").change(function() {
$("input[name='department_pk[]']").each(function(i){
if(jQuery(this).is(":checked")) {
departments[i] = $(this).val();
} else {
departments[i] = 0;
}
});
});
This sort of worked, but map() is more accurate:
if($(this).is(':checked')) {
departments.push($(this).val());
} else {
departments.pop($(this).val());
}
