我正在尝试从看起来像this的文本字段组中获取值。默认情况下，第一个问题和选项字段将可用。当用户单击添加文本字段按钮时，将添加另外一组。单击下载按钮后，它应在一个变量中显示整个组值。
我想获得类似this的输出。
如果用户选择了单选按钮，则应在其前面加上“＃”，否则应在前面加上“ *”。
我可以分别获取每个问题的值。但是，无法对整个组执行此操作并将其存储在单个实例中。我也实现了for循环。但是，出了点问题。
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<form class="col-sm-12">
<div id="textfields">
<div id="entireText0">
<div class="form-row">
<div class="col-sm-10">
<div class="form-group">
<label for="textarea0">Question</label>
<textarea class="form-control" id="textarea0" rows="2"></textarea>
</div>
</div>
</div>
<div class="form-row">
<label>Options</label>
</div>
<div id="optionfields">
<div class="form-group" id="myForm0">
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox1" class="form-control" aria-label="Text input with radio button">
</div>
</br>
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox2" class="form-control" aria-label="Text input with radio button">
</div>
</br>
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox3" class="form-control" aria-label="Text input with radio button">
</div>
</br>
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox4" class="form-control" aria-label="Text input with radio button">
</div>
</br>
</div>
</div>
</div>
</div>
<button type="button" id ="button0" class="btn btn-primary" onclick="addTextFields();">Add Text field</button>
<br/><br/>
<button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>
</form>
JS：
function selectedRadioButton() {
for(textid=0;textareaid>=textid;textareaid--,textid++){
var question= document.getElementById("textarea"+textid).value;
console.log("question",question);
question_gi= "::Q"+(textid+1)+"::"+question;
var selectedArray=["["];
$('.form-group #myForm+textid+ input[type=radio]').each(function() {
var value = "*";
if ($(this).is(":checked")) {
value = "#";
}
value += $($(this).closest('.input-group').find("input[type=text]")).val();
selectedArray.push(value);
});
selectedArray.push("]");
var newArr = selectedArray.join(',').replace(/,/g, ' ').split();
entire_gi= question_gi+ "%0d%0a" +newArr;
finalvalue=[];
finalvalue += entire_gi[textid];
console.log(finalvalue);
}
}
答案 0 :(得分：0)
您需要使用document.querySelectorAll来获取所有单选按钮和所有文本输入，以形成最终的String。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<form class="col-sm-12">
<div id="textfields">
<div id="entireText0">
<div class="form-row">
<div class="col-sm-10">
<div class="form-group">
<label for="textarea0">Question</label>
<textarea class="form-control" id="textarea0" rows="2"></textarea>
</div>
</div>
</div>
<div class="form-row">
<label>Options</label>
</div>
<div id="optionfields">
<div class="form-group" id="myForm0">
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox1" class="form-control" aria-label="Text input with radio button">
</div>
</br>
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox2" class="form-control" aria-label="Text input with radio button">
</div>
</br>
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox3" class="form-control" aria-label="Text input with radio button">
</div>
</br>
<div class="input-group col-sm-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" name="radiobutton" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" name="txtbox" id="textbox4" class="form-control" aria-label="Text input with radio button">
</div>
</br>
</div>
</div>
</div>
</div>
<button type="button" id ="button0" class="btn btn-primary" onclick="addTextFields();">Add Text field</button>
<br/><br/>
<button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>
</form>
<script>
function selectedRadioButton() {
var textarea = document.querySelector('#textarea0');
var question = textarea.value;
var str = "::Q1::"+question+"\n";
var radios = document.querySelectorAll('input[type=radio]');
str += "[";
var textinputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i < radios.length; i++){
str += (radios[i].checked)? "#": "*";
str += textinputs[i].value;
}
str += "]";
console.log(str);
}
</script>