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>this way:
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>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>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>