Estoy usando 2 grupos de botones de radio, llamémoslo 1.1 1.2 y 2.1 2.1 (un botón de radio del segundo grupo siempre está marcado, dependiendo de cuál del primer grupo esté marcado, el otro está oculto).
No puedo entender por qué necesito hacer doble clic en el botón de radio para desmarcarlo cuando ambos botones de radio están marcados. Quiero hacer clic solo una vez para "desmarcarlo".
function show() { swich(); } function swich() { $('input[type="radio"]').change(function(){ $('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked); }); } var checkedradio = false; var radioState = []; $("input[type=radio]").on('click', function(e) { if (radioState[this.name] === this) { this.checked = false; radioState[this.name] = null; } else { radioState[this.name] = this; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input data-group="A" id="radio1" required type="radio" value="Yes" name="group1"> <input data-group="B" id="radio2" required type="radio" value="No" name="group1"> <div id="someId1"> <input data-group="A" id="radio3" type="radio" name="group2" value="Yes" onclick="show()"> </div> <div id="someId2"> <input data-group="B" id="radio4" type="radio" name="group2" value="No" onclick="show()"> </div>ADVERTENCIA
No recomendamos que adopte este enfoque, ya que rompe la experiencia de usuario estándar para los botones de opción.
Su problema se debe a que reutiliza la checkedradio para ambas comprobaciones.
Asi que:
Necesita una variable diferente para cada grupo.
Como múltiples variables se vuelven muy desordenadas muy rápidamente (y mucho SECO), puede usar una matriz:
var radioState = []; $(":radio").on('click', function(e) { //console.log(radioState[this.name]) if (radioState[this.name] === this) { this.checked = false; radioState[this.name] = null; } else { radioState[this.name] = this; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input required type="radio" value="Yes" name="group1"> <input required type="radio" value="No" name="group1"> <hr/> <input type="radio" name="group2" value="Yes"> <input type="radio" name="group2" value="No">El código basado en esta respuesta se expandió para usar una matriz.
Pude lograr el resultado deseado basado en este código .
function show() { swich(); } function swich() { $('input[type="radio"]').change(function(){ $('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked); }); } function toggleRadio(event) { if(event.target.type === 'radio' && event.target.checked === true) { setTimeout(()=>{ event.target.checked = false; },0); } } document.addEventListener('mouseup', toggleRadio); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input data-group="A" id="radio1" required type="radio" value="Yes" name="group1"> <input data-group="B" id="radio2" required type="radio" value="No" name="group1"> <div id="someId1"> <input data-group="A" id="radio3" type="radio" name="group2" value="Yes" onclick="show(this)"> </div> <div id="someId2"> <input data-group="B" id="radio4" type="radio" name="group2" value="No" onclick="show(this)"> </div>