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