1

Tengo este codigo que al activarse el chekbox activa un radiobutton, pero quisiera que al desactivar el chekbox también lo hiciera el radiobutton ya que al hacerlo queda el radiobutton activado y me gustaría que se desmarcara también.

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

<input name="solicitud" type="checkbox" id="solicitud" value="SI" />
<input type="radio" name="interesado" value="Solicitud"> Option 2

<input type="radio" name="interesado" value="Otro"> Option 3
<script>
$(function () {

$("#solicitud").click(function () {
    if (this.checked){
        $("input:radio[value='Solicitud']").prop('checked', true);
    }
    else{
        $("input:radio[value='Solicitud']").prop('checked', false);
    }
});

});
</script>

2 respuestas 2

3

Debo decir que es algo poco convencional1 lo que intentas hacer aquí. Si aplicamos la siguiente lógica:

  • primer radio seleccionado = checkbox seleccionado
  • un radio distinto del primero seleccionado = checkbox no seleccionado

Entonces el checkbox es algo redundante, porque bastaría con evaluar el estado de los radio button, si es el primero o si no es el primero el que está seleccionado.

Sea como sea, puedes lograr lo que describes en el planteamiento de la pregunta escuchando por un lado los cambios de los radio button. Cuando sea seleccionado el radio con valor igual a Solicitud, estableces el estado del checkbox a checked, en caso contrario lo estableces a unchecked. Por otro lado, vamos a escuchar los cambios del checkbox, si el mismo tiene un estado checked, vamos a dar redundantemente ese mismo estado el primer radio, usando first().

$(function() {
  /*Escucha los cambios de los radio
    y selecciona el checkbox cuando
    el valor del radio que ha cambiado
    es igual a "Solicitud"
  */
  $('input[name=interesado]:radio').on('change', function() {
    $("#solicitud").prop('checked', $(this).val() === 'Solicitud');

  });

  /*Escucha los cambios del checkbox
    y selecciona el primer radio cuando
    el estado del checkbox es "checked"
  */

  $("#solicitud").on('change', function() {
    $("input[name='interesado']").first().prop('checked', $(this).is(':checked'));
  })

});
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

<input name="solicitud" type="checkbox" id="solicitud" value="SI" />
<input type="radio" name="interesado" value="Solicitud"> Option 2
<input type="radio" name="interesado" value="Otro"> Option 3


También lo puedes simplificar introduciendo algunas modificaciones en los elementos. Se trata de poner clases distintas a los elementos que deben ir juntos. Aquí pondremos la clase paired al checkbox y al primer radio (declarando así que vamos a trabajar de forma unánime con esos elementos), y pondremos la clase unpaired a otros radios.

El código escuchará por un lado los cambios de todos los elementos con la clase paired y establecerá el estado de los mismos al estado del elemento que cambió, sea este checked o unchecked. Por otro lado, escuchará los cambios de todos los elementos con clase unpaired, estableciendo a false el estado de todos los elementos con clase paired.

$(function() {

  /*Escucha los cambios de los elementos
    que tengan la clase "paired"
    y los activa todos
  */
  $('.paired').on('change', function() {
    $(".paired").prop("checked", $(this).is(':checked'));
  });

  /*Escucha los cambios de los elementos
    que tengan la clase "unpaired"
    y desactiva todos los que tengan
    la clase "paired"
  */

  $(".unpaired").on('change', function() {
    $(".paired").prop("checked", false);
  })

});
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

<input name="solicitud" type="checkbox" id="solicitud" value="SI" class="paired" />
<input type="radio" name="interesado" value="Solicitud" class="paired"> Option 2
<input type="radio" name="interesado" value="Otro" class="unpaired"> Option 3
<input type="radio" name="interesado" value="Otro 4" class="unpaired"> Option 4


Notas

  1. Conviene conocer el propósito de los diferentes elementos, para no escribir un código demasiado rocambolesco, el cual en la medida que un programa crece se puede hacer difícil de mantener o producir resultados no deseados. Puedes consultar la documentación para comprender mejor el uso del elemento checkbox así como el uso del elemento radio
1
  • Gracias a todos pro su ayuda!!
    – Eduardo
    Commented el 11 sept. a las 12:10
1

Para este caso, es necesario saber si tu checkbox se encuentra seleccionado o no, puedes realizarlo de la siguiente forma:

<script>
    $(function () {

        $("#solicitud").click(function () {
            if (this.checked){
                $("input:radio[value='2']").prop('checked', true);
            }
            else{
                $("input:radio[value='2']").prop('checked', false);
            }
        });

    });
</script>

donde el if(this.checked) valida que el check solicitud se encuentra seleccionado. El this.check funciona única y exclusivamente si el que disparó el evento fue el mismo checkbox, en caso de que sea otro botón o otro checkbox que no sea este mismo, deberás de usar para conocer si se encuentra seleccionado o no $('#idComponente').prop('checked')

1
  • Hola mil gracias pro tu respuesta, me funciona de maravilla pero tengo un problema que no he podido resolver, si por ejemplo hay otro radiobutton y se selecciona (quedando el primero deseleccionado, la casilla chekbox aun queda marcada) edite el codigo de mi pregunta con tu cambio.
    – Eduardo
    Commented el 10 sept. a las 14:08

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.