Question

我正在尝试制作一个带有文本框的表单。当我选中复选框时，会出现一个文本框，我可以输入值。当我点击提交按钮时，它应该发出一个警告，只显示我输入的值。

如何为此内容使用循环？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="../../../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="../../../js/bootstrap.min.js"></script>
<script src="../../../js/jquery-1.11.2.min.js"></script>
<script src="../../../js/collapse.js"></script>
</head>
<body>
<div class="container">
<script> 
var i; 
var j;
</script>
<button type="button" class="btn btn-info" data-toggle="collapse" 
data-target="#demo1">Item 1</button>
<div id="demo1" class="collapse "> 
<div class="checkbox">
<label data-toggle="collapse" data-target="#collapseOne">
<input type="checkbox" id="check1"/> Option 1
</label>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox1"></input>
</div>
</div>
</div>
</div>
<div class="checkbox" j="2">
<label data-toggle="collapse" data-target="#collapseTwo">
<input type="checkbox" id="check2"/> Option 2       
</label>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox2"></input>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" 
data-target="#demo2" i="2">Item 2</button>
<div id="demo2" class="collapse in">
<div class="checkbox" j="1">
<label data-toggle="collapse" data-target="#collapseThree">
<input type="checkbox" id="check3"/> Option 1  
</label>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox3" ></input>
</div>
</div>
</div>
</div>
<div class="checkbox" j="2">
<label data-toggle="collapse" data-target="#collapseFour">
<input type="checkbox" id="check4"/> Option 2  
</label>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox4"></input>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" value="submit" onclick="myFunction();"/>
<script>

function myFunction() {
    for(
    if (document.getElementById("check1").checked){
var x = document.getElementById("textbox1");
var content= "Item 1 Option 1:  "+ x.value;
document.write(content);
    }
     if (document.getElementById("check2").checked){
var y = document.getElementById("textbox2");
var content= "Item 1 Option 2:  "+ y.value;
document.write(content);
    }
 if (document.getElementById("check3").checked){
var z = document.getElementById("textbox3");
var content= "Item 2 Option 1:  "+ z.value;
document.write(content);
    }
     if (document.getElementById("check4").checked){
var w = document.getElementById("textbox4");
var content= "Item 2 Option 2 :  "+ w.value;
document.write(content);
    }
}
</script> 
</body>
</html>

Answer 1

如果您的HTML看起来像这样，并且您的表单上没有其他<input type="text">标记：

<input type="checkbox" id="check1" value="text1" onclick='showHide(this);' /><input type="text" id="text1" style="display:none"/> <br>
<input type="checkbox" id="check2" value="text2" onclick='showHide(this);'/><input type="text" id="text2" style="display:none"/> <br>
<input type="checkbox" id="check3" value="text3" onclick='showHide(this);'/><input type="text" id="text3" style="display:none"/> <br>
<input type="checkbox" id="check4" value="text4" onclick='showHide(this);'/><input type="text" id="text4" style="display:none"/> <br>

<input type="button" onclick='alertChecked()' value='alert checked'/>

然后您可以使用javascript解决方案：

function showHide(source){ 
    var textBox = document.getElementById(source.value);

    if (isHidden(textBox)){
        textBox.style.display = 'inline';
    }
    else{
        textBox.style.display = 'none';
    }
}

function alertChecked(){ 
    var text = '';
    var inputs = document.getElementsByTagName('input');
    for (index = 0; index < inputs.length; ++index) {
        if (inputs[index].type == 'text' && isHidden(inputs[index]) === false){
            text += inputs[index].value;
        } 
    }
     alert(text);
}

function isHidden(el) {
    return (el.offsetParent === null)
}

演示小提琴：http://jsfiddle.net/ggcse3zz/1/

或jQuery解决方案：

function showHide(source){    
    $('#'+source.value).toggle();
}

function alertChecked(){ 
    var text = '';
    $('input[type=text]:visible').each(function(){
        text += $(this).val();
    });
    alert(text);
}

演示小提琴：http://jsfiddle.net/ggcse3zz/

基于添加的HTML

进行编辑

根据您的html，您可以使用ID数组查找所有input代码并将其循环播放：

function myFunction(){ 
    var text = '';
    var textboxes = ["textbox1", "textbox2", "textbox3", "textbox4"];
for (index = 0; index < textboxes.length; ++index) {
    var input = document.getElementById(textboxes[index]);
    if (isHidden(input) === false){
       text += input.value;
   }

}
     alert(text);
}

function isHidden(el) {
    return (el.offsetParent === null)
}

请注意，此javascript取决于input标记的可见性，而不是{}}}是否已选中。{/ p>

演示小提琴：http://jsfiddle.net/usvLe3r1/

Answer 2

你应该增强myFunction（）方法：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
var oscillator = audioCtx.createOscillator();
oscillator.type = 'square';   
oscillator.frequency.value = 1000; // value in hertz 
oscillator.start();

var filter = audioCtx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 440;

oscillator.connect(filter);
filter.connect(audioCtx.destination);

我希望它有所帮助。

如何遍历JavaScript

2 个答案:

基于添加的HTML