Desearía poder mostrar u ocultar un div luego de la selección de un botón de opción
tengo 4 botones de radio
incluyendo 3 que deben mostrar el mismo div
y 1 otro div
la mejor forma que encontre es esta
Pero, ¿hay alguna forma de evitar tener 3 divs con el mismo contenido?
Me gustaría explicarme mejor que cuando seleccionamos "4 Cars, 3 Cars, 2 Cars" simplemente se ve el id = "liv-1", pero que si se selecciona "porque 1" que el id = "liv- 1 "o esconder
$(document).ready(function() { $("div.desc").hide(); $("input[name$='choix_livraison']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#ref-" + test).show(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique" value="1" checked="checked"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" value="2"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" value="3"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" value="4"> <div id="ref-1" class="desc"> j'ai sélectionné 2 </div> <div id="ref-2" class="desc"> j'ai sélectionné 3 </div> <div id="ref-3" class="desc"> j'ai sélectionné 3 </div> <div id="ref-4" class="desc"> j'ai sélectionné 3 </div>Por aquí:
const myForm = document.querySelector('#my-form') , divLiv = document.querySelectorAll('div.desc') , ref_Divs = { '1' : 'ref-2' , '2' : 'ref-3' , '3' : 'ref-3' , '4' : 'ref-3' }; myForm.onsubmit = e => e.preventDefault() // disable form page reload ; myForm.oninput = e => { let ref = ref_Divs[myForm.choix_livraison.value ] divLiv.forEach(el => { el.classList.toggle('selected', ref===el.id) }) } .desc { display: none; } .desc.selected { display: block; } label { display: block; } <form id="my-form"> <label> 2 Cars <input type="radio" name="choix_livraison" value="1" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique" checked="checked"> POSTE-ENVELLOPPE-belgique </label> <label> 3 Cars <input type="radio" name="choix_livraison" value="2" class="choix_livraison" data-nom="mondial relay-belgiqueE" > mondial relay-belgiqueE </label> <label> 3 Cars <input type="radio" name="choix_livraison" value="3" class="choix_livraison" data-nom="mondial relay-FRANCE" > mondial relay-FRANCE </label> <label> 3 Cars <input type="radio" name="choix_livraison" value="4" class="choix_livraison" data-nom="mondial relay-autre" > mondial relay-autre </label> </form> <br> <div id="ref-2" class="desc selected"> j'ai sélectionné 2 </div> <div id="ref-3" class="desc"> j'ai sélectionné 3 </div>En lugar de ID, use el atributo de datos para usar el valor que desea. Supongo que quieres hacerlo en el idioma, así que usé data-lang="" . Ajústalo a tu gusto.
PD. También es posible que desee abrir uno predeterminado ya que se selecciona un valor al cargar la página.
$(document).ready(function() { $("div.desc").hide(); $("input[name$='choix_livraison']").click(function() { var languageCode = $(this).data('lang'); $("div.desc").hide(); $("#ref-" + languageCode).show(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique" data-lang="be" value="1" checked="checked"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" data-lang="be" value="2"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" data-lang="fr" value="3"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" data-lang="be" value="4"> <div id="ref-be" class="desc"> languageCode BE </div> <div id="ref-fr" class="desc"> languageCode FR </div>Sólo tienes dos opciones. muestre a) j'ai selecciónné 3 o b) j'ai selecciónné 2. Luego puede usar una condición if simple en su controlador de eventos. Como eso:
ejemplo de funcionamiento
const sel = document.querySelector('#sel'); sel.addEventListener('click', (e) => { const i = document.querySelector('input[name="choix_livraison"]:checked'); let val = e.target.value; console.log('=>',val) if (val == 1) { // show output 1 document.getElementById('output-2').classList.add('hide') document.getElementById('output-1').classList.remove('hide') } else { console.log(2) // show output 2 document.getElementById('output-1').classList.add('hide'); document.getElementById('output-2').classList.remove('hide'); } }); .hide { display:none; } <div id="sel"> 2 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique" value="1" checked="checked"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" value="2"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" value="3"> 3 Cars <input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" value="4"> </div> <div id="output-1" class="hide desc"> j'ai sélectionné 2 </div> <div id="output-2" class="hide desc"> j'ai sélectionné 3 </div>