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();
this.selected=false;
});
}
});
<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>