How to transfer selected checkboxes to an Hidden input field?

Question

I have a checkbox checkbox that selects multiple cities and I need the selected values to enter within one value of a input hidden. The example of what I need can be found here by clicking on Neighborhoods.

What I already did: when you click on the input it opens a popup with the neighborhoods ...

<div class="col-md-2 third-field-search">
<?php
if(isset($_SESSION['bairro'])){ ?>
    <input type="text" class="form-control" name="bairro" id="bairro" placeholder="Bairros" value="<?php echo $_SESSION['bairro']; ?>" data-toggle="modal" data-target="#modalBairros" data-whatever="@getbootstrap">
<?php } else { ?>
    <input type="text" name="bairro" id="bairro" class="form-control" placeholder="Bairros" data-toggle="modal" data-target="#modalBairros" data-whatever="@getbootstrap">
<?php } ?>
</div>

Inside the POPUP I have this:

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="todos-bairros">
        <input id="z885ar" name="todos[]" class="marg0 ckeck-checkbox" value="" type="checkbox">&nbsp;&nbsp;REGIÃO 1<br>
    </div>
    <input name="bairros[]" class="z885ar" value="Bairro1" type="checkbox">Bairro 1<br>
    <input name="bairros[]" class="z885ar" value="Bairro2" type="checkbox">Bairro 2<br>
    <input name="bairros[]" class="z885ar" value="Bairro3" type="checkbox">Bairro 3<br>
    <input name="bairros[]" class="z885ar" value="Bairro4" type="checkbox">Bairro 4<br>

Answer 1

If I can use jQuery, it’s something like this:

$('.classDosCheckBox').click(function () {

    var $hidden = $('#idDoInputHidden'); 

    if(this.checked)
        $hidden.val($hidden.val() + ',' + this.value);
    else {
        $hidden.val($hidden.val().replace(',' + this.value, '');
    }
});

This is an idea of the solution, serves as a starting point to achieve what you need.