0

Tengo un select multiple que lo oculto cuando le doy click a un checkbox y aparte de ocultarlo me gustaría quitar los option selecionados tambien.

<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>

Eso lo tengo dentro de un div que al hacer click al check hago lo siguiente.

$('#alergia').click(function(){
if($(this).is(':checked')){ 
    document.getElementById("tipoAlergias").style.display = "block";
}else{
    document.getElementById("tipoAlergias").style.display = "none";

}
});

Y me gustaría como he dicho ademas de hacer un display none, quitar los option seleccionados.

2
  • me suena que había una función .clear(), algo así como (elemento).clear();
    – Iria
    Commented el 21 ene. 2020 a las 10:50
  • En el titulo indicas que quieres eliminarlos pero en la pregunta hablas de ocultar y deseleccionarlo. Son dos cosas distintas, deberías de aclararlo.
    – x3k
    Commented el 21 ene. 2020 a las 11:18

4 respuestas 4

6

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>

8
  • Me referia a deselecionar cuando le de a un checkbox que no esta en ese select Commented el 21 ene. 2020 a las 11:56
  • @daniellandete entonces tu pregunta no es para nada clara. Por favor edita la pregunta explicando lo que quieres realmente y mostrando ese checkbox del que hablas, o bien abre otra pregunta y guardamos esta por si alguien tiene un problema parecido. Lo que se entendía era que querías quitar la opción que sea seleccionada y de hecho en tu código aparecía un on click
    – A. Cedano
    Commented el 21 ene. 2020 a las 11:59
  • @daniellandete revisa ahora la respuesta editada.
    – A. Cedano
    Commented el 21 ene. 2020 a las 12:15
  • por defecto el select multiple esta oculto, y cuando le das check se muestra y cuando quitas el check se tiene que ocultar y a su vez quitar los option seleccionados, pero no eliminarlos. Commented el 21 ene. 2020 a las 12:26
  • Bueno se entiende mejor ahora, pero el final es contradictorio: se tiene que ocultar y a su vez quitar los option seleccionados, pero no eliminarlos. ¿Podrías explicar qué entiendes por quitar y qué entiendes por eliminar? Para mi es lo mismo una cosa que otra. Si desde el principio aclaras con sencillez lo que realmente quieres hacer habría sido más fácil.
    – A. Cedano
    Commented el 21 ene. 2020 a las 12:40
1

Le agregaría un id a tus opciones y luego con jquery las deseleccionaria:

<option id="opcionUno" value="3">Celíaca</option>
<option id="opcionDos" value="2">Celíaca sin Lactosa</option>
<option id="opcionTres" value="4">Diabética</option>

$('#alergia').click(function(){
   if($(this).is(':checked')){ 
      $("#opcionUno"). prop("checked", false);
   }
});
1

Los elementos deshabilitados no se envían en los formularios por lo que puedes hacer simplemente esto:

$("#tipoAlergias").attr("disabled", true);

snippet disabled

$('#alergia').click(function(){
  if($(this).is(':checked')){ 
    $("#tipoAlergias").show(); //Se muestra
    $("#tipoAlergias").removeAttr("disabled");
  }else{
    $("#tipoAlergias").hide(); //Se oculta
    $("#tipoAlergias").attr("disabled", true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="input checkbox">
    <input type="hidden" name="alergias" value="0">
    <label for="alergia"><input type="checkbox" name="alergias" value="1" id="alergia" checked>Alergias</label>
  </div>
  <select id="tipoAlergias" 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>
  <input type="submit" value="enviar">
</form>


También puedes hacer algo manual guardando los seleccionados y volviéndoselos a asignar cuando se vuelve a mostrar

snippet jQuery borrando el value y volviéndoselo a asignar:

var seleccionados = [];
$('#alergia').click(function(){
  if($(this).is(':checked')){ 
    $("#tipoAlergias").show(); //Se muestra
    $("#tipoAlergias").val(seleccionados);
  }else{
    $("#tipoAlergias").hide(); //Se oculta
    seleccionados = $("#tipoAlergias").val();
    $("#tipoAlergias").val(null);
  }
});
<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" checked>Alergias</label>
</div>
<select id="tipoAlergias" 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>

<button onclick="console.log($('#tipoAlergias').val())">Pulsar para ver los seleccionados</button>

0

yo solucioné algo similar con algo como esto, recorriendo el select como un array

var radios = document.getElementsByName("select");
  for(i = 0; i < radios.length; i++){
     if(radios[i].checked){
        radios[i].checked =false;
     }
}

quizá si lo agregas después de que haces el diplay none funcione

    $('#alergia').click(function(){
    if($(this).is(':checked')){ 
        document.getElementById("tipoAlergias").style.display = "block";
    }else{
        document.getElementById("tipoAlergias").style.display = "none";
        var radios = document.getElementsByName("alergias2[]");
        for(i = 0; i < radios.length; i++){
        if(radios[i].checked){
         radios[i].checked =false;
        }
      }
    }
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.