当用户选中多个复选框时，表单字段应根据复选框显示，例如：如果航班复选框具有姓氏全名，则当用户同时选中酒店和航班时，姓氏和姓氏均应存在，其他字段应为隐藏。
我尝试了一个切换方法，该方法在我检查时会隐藏，但是我无法选择多个字段并将共同的字段放在一起并隐藏其他字段。我的复选框也应该水平对齐。我应该使用CSS，但无法正常工作
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{
max-width: 600px;
padding: 15px 25px;
background: #f4f7f8;
margin: 15px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 18px;
font-family:Calibri, sans-serif;
}
.form-style-1 fieldset{
border-radius:none;
background-color:#f2f2f2;
padding:20px;
border:1px solid lightgray;
width:550px;
margin:auto;
}
.form-style-1 lable{
width:180px;
float:left;
padding-top: 50px;
}
.form-control {
width:550px;
padding:15px 30px;
margin:8px 0;
border:1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display:inline;
}
output{
height:30px;
display:block;
padding-top:20px;
}
.btn {
width:100%;
background-color:#4CAF50;
padding: 14px 20px;
margin: 8px 0;
border:none;
border-radius:4px;
cursor:pointer;
}
.btn:hover {
background-color:#45a049;
}
.form-style-1 input[type="text"], .form-style-1 input[type="date"], .form-style-1 input[type="datetime"], .form-style-1 input[type="email"], .form-style-1 input[type="number"], .form-style-1 input[type="search"], .form-style-1 input[type="time"], .form-style-1 input[type="url"], .form-style-1 input[type="tel"], .form-style-1 textarea, .form-style-1 select {
font-family: Calibri, sans-serif ;
background: rgba(255,0,0,0.2);
border: none;
border-radius: 3px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color:#000000;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 10px;
}
.form-style-1 input[type="text"]:focus, .form-style-1 input[type="date"]:focus, .form-style-1 input[type="datetime"]:focus, .form-style-1 input[type="email"]:focus, .form-style-1 input[type="number"]:focus, .form-style-1 input[type="search"]:focus, .form-style-1 input[type="time"]:focus, .form-style-1 input[type="url"]:focus, .form-style-1 input[type="tel"], .form-style-1 textarea:focus, .form-style-1 input {
}
}
.form-style-1 select{
-webkit-appearance: menulist-button;
height:15px;
color:#000000;
text-shadow: 0 1px 0 rgba(0,0,0);
background: #d2d9dd;
}
.form-style-1 number {
background: #1abc9c;
color: #000000;
height: 10px;
width: 10px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 10px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-1 input[type="submit"], .form-style-1 input[type="button"] {
position: relative;
display: block;
padding: 15px 29px 15px 29px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 15px;
text-align: center;
line-height:10%;
font-style: normal;
width: 30%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top:1px;
margin-bottom: 5px;
}
.form-style-1 input[type="submit"]:hover, .form-style-1 input[type="button"]:hover{
background: #109177;
}
#travel-form label,textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width:80%;
padding-bottom:0.1rem;
}
#travel-form input, select {
margin-left:1rem;
}
textarea {
display:flex;
flex-flow: row nowrap;
justify-content: space-between;
width:250%;
padding-bottom:0.1rem;
}
.common {
margin-bottom: 8px;
}
input[type="text"]
{
display:none;
}
button {
display:none;
}
input[type="checkbox"]
{
display: inline;
width: 12px;
height: 12px;
padding: 5px;
}<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>
<input type="checkbox" onclick="toggle(this)" id="flight" value="flight"><label for="flight">Flight</label>
<input type="checkbox" onclick="toggle(this)" id="hotel" value="hotel"><label for="hotel">Hotel</label>
<input type="checkbox" onclick="toggle(this)" id="travel" value="travel"><label for="travel">Travel</label>
<label>Full Name: <input type="text" class="input1 common " id="name" placeholder="Full Name as per Passport" ></label><br>
<label>Date of travel: <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>
<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>
<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>
答案 0 :(得分：0)
有不同的方法来获得结果。 例子
在您的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: <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>
希望这会有所帮助