Multiple select with ckeckboxes

by jpussacq

HTML

<div>

  Hito:

  <input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">

  <input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">

  <input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()">

  <div class="contenedor" style="display: none;">
    <input id="cfh_1" type="checkbox" /> Hito 1
    <br />
    <input id="cfh_2" type="checkbox" /> Hito 2
    <br />
    <input id="cfh_3" type="checkbox" /> Hito 3
    <br />
    <input id="cfh_4" type="checkbox" /> Hito 4
    <br />
    <input id="cfh_5" type="checkbox" /> Hito 5
    <br />
    <input id="cfh_7" type="checkbox" /> Hito 6
    <br />
    <input id="cfh_8" type="checkbox" /> Hito 7
    <br />
    <input id="cfh_4567" type="checkbox" /> Hito 8
    <br />
    <input id="cfh_345" type="checkbox" /> Hito Implementación final del evento
    <br />
    <input id="cfh_45671" type="checkbox" /> Hito a8
    <br />
    <input id="cfh_45672" type="checkbox" /> Hito s8
    <br />
    <input id="cfh_45673" type="checkbox" /> Hito d8
    <br />
    <input id="cfh_45674" type="checkbox" /> Hito f8
    <br />
    <input id="cfh_45675" type="checkbox" /> Hito g8
    <br />
  </div>

</div>

Lorem ipsum dolor sit amet, libero nullam dolor, auctor consequat. Risus donec nunc nulla maecenas, at mattis, arcu tempor. Faucibus velit vitae arcu mauris, sem blandit elementum. Conubia pede interdum urna suspendisse eget. Vestibulum malesuada amet
ac vel ligula, leo aenean, ac ultrices nec class, consectetuer adipiscing massa in sint morbi justo, sit maecenas a sit. Enim molestie, porta enim, dolor suscipit sagittis, donec ornare sed aenean aliquet parturient blandit. Quisque nisl tempus arcu...

CSS

.contenedor {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  position: fixed;
  background: white;
  margin-top: 2px;
}

JavaScript

function obtenerSeleccionados() {
  var seleccionados = [];
  $('.contenedor input:checked').each(function() {
    seleccionados.push($(this).attr('id'));
  });
  alert(seleccionados);
}