如何使用单选按钮隐藏 div

Question

I wish I could show or hide a div following the selection of a radio button
I have 4 radio buttons
including 3 which must display the same div
and 1 another div
the best way i found is this one
But is there a way to avoid having 3 divs with the same content?
I would like to better explain myself that when we select "4 Cars, 3 Cars, 2 Cars" that the id = "liv-1" is simply visible, but that if "because 1" is selected that the id = "liv -1 "or hide

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

Answer 1

this way:

1. use a form
2. use labels
3. use css
4. use the mdn doc -> https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

 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>

Answer 2

Instead of ids use data attribute to use the value you want. Like I assume you want to do it on language so I used data-lang="" . Tweak it to your liking.

ps. you also might want to do a default open one as a value is selected on loading the page.

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

Answer 3

You have only two options. show a) j'ai sélectionné 3 or b) j'ai sélectionné 2. Then you can use a simple if condition in your event handler. Like that:

workings example

 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>