Skip to main content
3 de 4
se añadieron 1554 caracteres en el cuerpo
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Para quitar los elementos que estén seleccionados únicamente al marcar el checkbox, puedes determinar dentro de un each qué opciones están seleccionadas en ese momento.

OJO, aquí he dado coherencia al código, evaluando si el checkbox está checked, porque si no se evalúa eso, se quitarán las opciones seleccionadas en cualquiera de los casos, solamente en el click o change del elemento, lo cual no sería lógico.

NOTA: Dado que no nos aclaramos en los conceptos, dentro del each puedes aplicar aquella acción que necesites sobre las opciones seleccionadas. En la pregunta se entiende que quieres quitarlos, por lo tanto he aplicado remove() dentro del each. Si lo que quieres es otra cosa sólo tienes que cambiar el remove() por la acción que quieras ejecutar.

$('#alergia').change(function() {
  if (this.checked) {
    $.each($('[name="alergias2[]"] option:selected'), function(index, value) {
      $(this).remove();
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input checkbox">
  <input type="hidden" name="alergias" value="0">
  <label for="alergia"><input type="checkbox" name="alergias" value="1" id="alergia">Alergias</label>
</div>
<select name="alergias2[]" multiple="multiple">
  <optgroup label="Alergias">
    <option value="3">Celíaca</option>
    <option value="2">Celíaca sin Lactosa</option>
    <option value="4">Diabética</option>
  </optgroup>
</select>

#Remover una opción al hacer clic sobre ella

Dado que esto podría ser útil a alguno, dejo el código mediante el cual se puede remover una determinada opción al hacer clic sobre ella.

Puedes hacerlo con jQuery o con Javascript puro.

##jQuery

En jQuery, puedes invocar sencillamente la opción seleccionada mediante $('option:selected', this) y luego aplicar remove().

Por ejemplo:

$('#alergia').click(function() {
  $('option:selected', this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="alergia" name="alergias2[]" multiple="multiple">
  <optgroup label="Alergias">
    <option value="3">Celíaca</option>
    <option value="2">Celíaca sin Lactosa</option>
    <option value="4">Diabética</option>
  </optgroup>
</select>


##Javascript

En Javascript puro puedes hacer uso de selectedIndex para determinar el índice del elemento seleccionado y luego invocar remove() con dicho valor.

Por ejemplo:

var elSelect = document.getElementById('alergia');

elSelect.addEventListener('click', function() {
  elSelect.remove(elSelect.selectedIndex)
});
<select id="alergia" name="alergias2[]" multiple="multiple">
  <optgroup label="Alergias">
    <option value="3">Celíaca</option>
    <option value="2">Celíaca sin Lactosa</option>
    <option value="4">Diabética</option>
  </optgroup>
</select>

A. Cedano
  • 95.2k
  • 31
  • 145
  • 257