Javascript 选中多个复选框时，表单字段应填充公共字段

当用户选中多个复选框时，表单字段应根据复选框显示，例如：如果航班复选框有全名姓氏，当用户同时选中酒店和航班时，全名和姓氏应存在，其他字段应隐藏

我尝试了一种切换方法，该方法在我选中时隐藏，但我无法选择多个字段，并将公共字段聚集在一起，隐藏其他字段。我的复选框也应该水平对齐。我应该这么做，但它不起作用

功能切换（对象）{
var输入；
var value=object.getAttribute（“值”）；
开关（值）{
案例“飞行”：
input=“input1”；
打破
案例“酒店”：
input=“input2”；
打破
案例“旅行”：
input=“input3”；
打破
}
var elements=document.getElementsByClassName（输入）；
对于（var i=0；i

.form-style-1{
最大宽度：600px；
填充：15px 25px；
背景#f4f7f8；
利润率：15px自动；
填充：20px；
背景#f4f7f8；
边界半径：18px；
字体系列：Calibri，无衬线；
} 
.form-style-1字段集{
边界半径：无；
背景色：#F2F2；
填充：20px；
边框：1px实心浅灰色；
宽度：550px；
保证金：自动；
}
.form-style-1标签{
宽度：180px；
浮动：左；
填充顶部：50px；
}
.表格管制{
宽度：550px；
填充：15px 30px；
利润率：8px0；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
显示：内联；
}
输出{
高度：30px；
显示：块；
填充顶部：20px；
}
.btn{
宽度：100%；
背景色：#4CAF50；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
.btn:悬停{
背景色：#45a049；
}
.form-style-1输入[type=“text”]，.form-style-1输入[type=“date”]，.form-style-1输入[type=“datetime”]，.form-style-1输入[type=“email”]，.form-style-1输入[type=“number”]，.form-style-1输入[type=“search”]，.form-style-1输入[type=“url”]，.form-style-1输入[type=“tel”]，.form-style-1文本区，.form-style-1选择{
字体系列：Calibri，无衬线；
背景：rgba（255,0,0,0.2）；
边界：无；
边界半径：3px；
字体大小：15px；
保证金：0；
大纲：0；
填充：10px；
宽度：50%；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
背景色：#e8eeef；
颜色：#000000；
-webkit盒阴影：0 1px 0 rgba（0,0,0,0.03）插图；
盒影：0 1px 0 rgba（0,0,0,0.03）插入；
边缘底部：10px；
}
.form-style-1输入[type=“text”]：焦点，.form-style-1输入[type=“date”]：焦点，.form-style-1输入[type=“datetime”]：焦点，.form-style-1输入[type=“email”]：焦点，.form-style-1输入[type=“number”]：焦点，.form-style-1输入[type=“search”]：焦点，.form-style-1输入[type=“time”]：焦点，.form-style-1输入[type=“url”]：焦点，.form-style-1输入[type=“tel”]，.form-style-1文本区域：焦点，.form-style-1输入{
}
}
.form-style-1选择{
-webkit外观：菜单列表按钮；
高度：15px；
颜色：#000000；
文本阴影：0 1px 0 rgba（0,0,0）；
背景：#d2d9dd；
}
.form-style-1编号{
背景：#1abc9c；
颜色：#000000；
高度：10px；
宽度：10px；
显示：内联块；
字号：0.8em；
保证金权利：4px；
线高：10px；
文本对齐：居中；
文本阴影：0 1px 0 rgba（255255,0.2）；
边界半径：15px 15px 15px 0px；
}
.form-style-1输入[type=“submit”]，.form-style-1输入[type=“button”]{
位置：相对位置；
显示：块；
填充：15px29px15px29px；
颜色：#FFF；
保证金：0自动；
背景：#1abc9c；
字体大小：15px；
文本对齐：居中；
线高：10%；
字体风格：普通；
宽度：30%；
边框：1px实心#16a085；
边框宽度：1px 1px 3px；
页边顶部：1px；
边缘底部：5px；
}
.form-style-1输入[type=“submit”]：悬停，.form-style-1输入[type=“button”]：悬停{
背景：#109177；
}
#旅行表单标签，文本区域{
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
宽度：80%；
垫底：0.1rem；
}
#旅行表单输入，选择{
左边距：1 em；
}
文本区{
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
宽度：250%；
垫底：0.1rem；
}
.普通的{
边缘底部：8px；
}
输入[type=“text”]
{
显示：无；
}
钮扣{
显示：无；
}
输入[type=“checkbox”]
{
显示：内联；
宽度：12px；
高度：12px；
填充物：5px；
}

航班
酒店
旅行
全名：

旅行日期：
抵达日期：
原产地：
选择
阿拉伯联合酋长国迪拜（DXB迪拜国际）
目的地：
没有一个
英国苏格兰阿伯丁（ABZ）
移动电话号码（漫游）

有不同的方法来实现这一结果。
范例

在您的css中

        .active{   // Once a check box selected related group will be added with .active class and removed once it is unchecked
            display: block !important;
        }

        .flight, .hotel, .travel{ // Initially all groped elements are in hidden state
             display:none;
        }

javascript中的

 function toggle() {
    var sender = event.target || event.srcElement;
    var value = sender.getAttribute("value");
    var group = document.querySelector("."+value) // If you have different div with same css class name you have to use "document.querySelectorAll()" and iterate through the list for update all elements
    if(sender.checked){
       group.classList.add("active");
    }else{
      group.classList.remove("active")
    }

}

html格式的

<div class="form-style-1">
    <form action="mailto:    ?subject=Travel Pre-approval Form " method="post" enctype="text/plain" id="travel-form" onsubmit="test1()">
        <fieldset>
            <div>
                <input type="checkbox" onclick="toggle()" id="flight" value="flight"><label for="flight">Flight</label>
                <input type="checkbox" onclick="toggle()" id="hotel" value="hotel"><label for="hotel">Hotel</label>
                <input type="checkbox" onclick="toggle()" id="travel" value="travel"><label for="travel">Travel</label>
            </div>
            <div class="flight ">
                <label>Full Name: <input type="text" class="input1 common " id="name" placeholder="Full Name as per Passport"></label>
                <label>Date of travel:&nbsp;&nbsp; <input type="date" class="input1 common " name="num1" id="date of travel"></label>
                <label>Date of arrival: <input type="date" class="input1 common" name="num2"></label>
            </div>
            <div class="hotel ">
                <label>
                    Origin Location:
                    <select name="opt2" id="cost" onchange="calculateTotal()">
                        <option value="select">select</option>
                        <option value="Dubai, United Arab Emirates (DXB-Dubai Intl.)">Dubai, United Arab Emirates (DXB-Dubai Intl.)</option>
                    </select>
                </label>
            </div>
            <div class="travel">
                <label>
                    Destination Location: <select name="op1" id="locations" onchange="calculateTotal()">
                        <option value="none">none</option>
                        <option value="Aberdeen, Scotland, UK (ABZ)">Aberdeen, Scotland, UK (ABZ)</option>
                    </select>
                </label>
                <label>Mobile Number(Roaming) <input type="tel" id="phone"></label><br><br>
            </div>
        </fieldset>
    </form>
</div>


航班
酒店
旅行
全名：
旅行日期：
抵达日期：
原产地：
选择
阿拉伯联合酋长国迪拜（DXB迪拜国际）