gpt4 book ai didi

选中多个复选框时的 javascript 代码应根据复选框显示表单字段(我使用选择选项方法尝试过)

转载 作者:行者123 更新时间:2023-11-28 16:55:31 24 4
gpt4 key购买 nike

需要复选框而不是选择选项,并且根据选中的复选框表单字段应该出现多个复选框。

带有提交按钮。我添加了一小部分 css,这个案例需要完整详细的 css。

function showHide(elem) {
if(elem.selectedIndex != 0) {
//hide the divs
for(var i=0; i < divsO.length; i++) {
divsO[i].style.display = 'none';
}
//unhide the selected div
var y = document.getElementsByClassName('input'+elem.value);
for (var i = 0; i < y.length; i++) {
y[i].style.display = 'block';
}

}
}

window.onload=function() {
//get the divs to show/hide
divsO = document.getElementById("main-form").getElementsByTagName('input');
}
#main-form input {
display: none;
}

.common {
margin-bottom: 8px;
}
<head>
<title></title>
</head>
<body>
<form id="main-form">
<select onchange="showHide(this)" id="select-field">
<option value="">Select an option</option>
<option value="1">flight</option>
<option value="2">hotel</option>
<option value="3">travel</option>
</select>

<br><br>
<input type="text" class="input1 common" placeholder="flight">
<input type="text" class="input1 common" placeholder="flight2">
<input type="text" class="input1 common" placeholder="flight3">

<input type="text" class="input2 common" placeholder="hotel">
<input type="text" class="input2 common" placeholder="hotel2">

<input type="text" class="input3 common" placeholder="travel">
<input type="text" class="input3 common" placeholder="travel2">
<input type="text" class="input3 common" placeholder="travel3">
<input type="text" class="input3 common" placeholder="travel4">


</form>

<span id="show"></span>

最佳答案

每次单击复选框时,它都会触发一个切换功能,该功能将隐藏或显示其相应的文本框输入。

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";
}
.common {
margin-bottom: 8px;
}

input[type="text"]{
display:none;
}

button {
display:none;
}
<head>
<title></title>
</head>
<body>
<form id="main-form">
<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>

<br><br>
<input type="text" class="input1 common" placeholder="flight">
<input type="text" class="input1 common" placeholder="flight2">
<input type="text" class="input1 common" placeholder="flight3">

<input type="text" class="input2 common" placeholder="hotel">
<input type="text" class="input2 common" placeholder="hotel2">

<input type="text" class="input3 common" placeholder="travel">
<input type="text" class="input3 common" placeholder="travel2">
<input type="text" class="input3 common" placeholder="travel3">
<input type="text" class="input3 common" placeholder="travel4">

<button type="submit">Button</button>

</form>

<span id="show"></span>

关于选中多个复选框时的 javascript 代码应根据复选框显示表单字段(我使用选择选项方法尝试过),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57152975/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com