Question

表单字段应根据多个复选框显示/隐藏。加上某些复选框具有公用字段，请在勾选复选框时填充这些字段。我已经尝试过切换方法，但是在勾选多个复选框时不会显示通用输入或标签字段。

我也需要一些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";

}

<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>



    </fieldset>

</form>

</div>



 </body>

</html>

当用户勾选多个复选框时，表单字段将根据具有公共字段的复选框进行填充

0 个答案: