You don't need to check every element. Here's a simple working example created with jQuery:
Javascript Array Radio Button Toggle view of DIVs
-
24-06-2023 - |
Question
I have 4 radio buttons in a group with id=j1 id=j2 id=j3 id=j4 that needs to toggle the view of DIVS id=act1 id=act2 id=act3 id=act4 what I've done works but I would like an array preferably in JavaScript or both JavaScript and JQuery. I've seen some examples out there but not quite like this.
HTML
<input id="j1" name="h2" type="radio" value="" onclick="showRisk();">
<label for="j1">Not At Acute Risk </label><BR>
<input id="j2" name="h2" type="radio" value="" onclick="showRisk();">
<label for="j2"> Low Acute Risk </label><BR>
<input id="j3" name="h2" type="radio" value="" onclick="showRisk();">
<label for="j3"> Intermediate Acute Risk</label><BR>
<input id="j4" name="h2" type="radio" value="" onclick="showRisk();">
<label for="j4"> High Acute Risk </label><BR>
<div id="act1">
Content1
</div>
<div id="act2">
Content2
</div>
<div id="act3">
Content3
</div>
<div id="act4">
Content4
</div>
CSS
[id^="act"] {
display: none;
}
JAVASCRIPT (Messy Messy need to clean up!)
function showRisk() {
if (document.getElementById("j1").checked == true) {
document.getElementById("act1").style.display="block";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="none";
} else {
document.getElementById("act1").style.display="none";
if (document.getElementById("j2").checked == true) {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="block";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="none";
} else {
document.getElementById("act2").style.display="none";
if (document.getElementById("j3").checked == true) {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="block";
document.getElementById("act4").style.display="none";
} else {
document.getElementById("act3").style.display="none";
if (document.getElementById("j4").checked == true) {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="block";
} else {
document.getElementById("act4").style.display="none";
}
}
}
}
}
La solution
Autres conseils
HTML:
<input type="radio" id="j1" name="r" value="act1" checked>j1
<input type="radio" id="j2" name="r" value="act2">j2
<input type="radio" id="j3" name="r" value="act3">j3
<input type="radio" id="j4" name="r" value="act4">j4
<div id="act1" class="block">act1</div>
<div id="act2" class="block" style="display: none;">act2</div>
<div id="act3" class="block" style="display: none;">act3</div>
<div id="act4" class="block" style="display: none;">act4</div>
css:
div{
border:1px solid black;
width: 100px;
height: 50px;
}
JAVASCRIPT:
$('document').ready(function(){
$('input').click(function(){
$('.block').hide();
$('#' + $("input:radio[name='r']:checked").val()).show();
});
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow