When the user checks multiple checkboxes, corresponding form fields should appear based on the checkboxes selected. For example, if the user checks both the flight and hotel checkboxes, the fields for full name and last name should be displayed, while other fields should be hidden.
I attempted to implement a toggle method that hides fields when checked, but I am unable to select multiple fields and display only the common fields while hiding others. Additionally, I need the checkboxes to be aligned horizontally. I have tried using CSS for alignment, but it is not working as expected.
function toggle(object){
var input;
var value = object.getAttribute("value");
switch(value){
case "flight":
input = "input1";
break;
case "hotel":
input = "input2";
break;
case "travel":
input = "input3";
break;
}
var elements = document.getElementsByClassName(input);
for(var i = 0; i < elements.length; i++){
if (elements[i].style.display == "block") {
elements[i].style.display = "none";
} else {
elements[i].style.display = "block";
}
}
document.getElementsByTagName("button")[0].style.display = "block";
}.form-style-1{
// CSS styles here...
}<body>
<div class="form-style-1">
<form action="mailto: ?subject=Travel Pre-approval Form " method="post" enctype="text/plain" id="travel-form" onsubmit="test1()" >
<fieldset>
<!-- Checkbox inputs and form fields here... -->
</fieldset>
</form>
</div>
</body>