时间戳

首页 > 解决方案 > 选中多个复选框时，表单字段应填充公共字段

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

问题描述

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

我尝试了一种切换方法，当我检查时会隐藏，但我无法选择多个字段并将公共字段放在一起并隐藏其他字段。我的复选框也应该水平对齐。我应该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:&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>
        <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>

标签： javascripthtmlcss

解决方案

有不同的方法来实现结果。例子

在你的 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>

希望这可以帮助

推荐阅读