我有一个 HTML 表单。在此表单中,我有 5 个复选框,每个复选框都有一个关联的文本区域。 所以我只想获取选中的复选框及其关联的文本区域文本的值。我能够获取选中复选框的值,但我无法找到获取其关联文本区域的值的方法。
我的 HTML 代码是:
<form class="my-form" id="id_MyForm">
<div class="form-group">
<label class="qquestion">6. Which of the following is most relevant to you and why? (Select all that apply).</label>
<div class="checkbox" id="id_Question6">
<label>
<input type="checkbox" id="input_que6a" value="Time" name="question6" />Time
</label>
<textarea name="question6a_textarea" id="id_que6a" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" id="input_que6b" value="Money" name="question6" /> Money
</label>
<textarea name="question6b_textarea" id="id_que6b" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" id="input_que6c" value="Family" name="question6" /> Family
</label>
<textarea name="question6c_textarea" id="id_que6c" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" id="input_que6d" value="Hobbies" name="question6" /> Hobbies
</label>
<textarea name="question6d_textarea" id="id_que6d" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" value="Other" name="question6" id="other_que6" /> Other
</label>
<br>
<textarea name="question6_textarea" id="id_Question6_textinput" class="form-control" placeholder="Please elaborate"></textarea>
</div>
</div>
<div class="text-center">
<button type="button" id="id_SubmitForm" class="btn btn-success">Submit</button>
</div>
</form>
我的 JavaScript 代码是:
/* Latest compiled and minified JavaScript included as External Resource */
var question6AnsArray = [];
/* To hide all the text areas when the page loads */
$("#id_Question6_textinput").hide();
$("#id_q6_opH_textarea").hide();
$('#id_que6a').hide();
$('#id_que6b').hide();
$('#id_que6c').hide();
$('#id_que6d').hide();
/* To show appropriate text area for selected check box */
$('#input_que6a').click(function() {
$("#id_que6a").fadeToggle(this.checked);
});
$('#input_que6b').click(function() {
$("#id_que6b").fadeToggle(this.checked);
});
$('#input_que6c').click(function() {
$("#id_que6c").fadeToggle(this.checked);
});
$('#input_que6d').click(function() {
$("#id_que6d").fadeToggle(this.checked);
});
$('#other_que6').click(function() {
$("#id_Question6_textinput").fadeToggle(this.checked);
});
$("#id_SubmitForm").click(function() {
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
//Here I want to get the value for the textarea.
});
var question6Answer = question6AnsArray.join(", ");
alert(question6Answer);
});
这里是 JSFiddle 的链接
最佳答案
$("#id_SubmitForm").click(function() {
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
question6AnsOtherArray.push($(this).closest("label").next("textarea").val());
});
var question6Answer = question6AnsArray.join(", ");
var question6OtherAnswer = question6AnsOtherArray.join(", ");
alert(question6Answer);
alert(question6OtherAnswer);
});
而且,您实际上也可以通过这种方式优化您的代码..
/* Latest compiled and minified JavaScript included as External Resource */
var question6AnsArray = [];
var question6AnsOtherArray = [];
/* To hide all the text areas when the page loads */
$("#id_Question6_textinput").hide();
$("#id_MyForm textarea").hide();
/* To show appropriate text area for selected check box */
$("input[type=checkbox]").click(function() {
$(this).closest("label").next("textarea").fadeToggle();
})
$('#other_que6').click(function() {
$("#id_Question6_textinput").fadeToggle(this.checked);
});
$("#id_SubmitForm").click(function() {
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
question6AnsOtherArray.push($(this).closest("label").next("textarea").val());
});
var question6Answer = question6AnsArray.join(", ");
var question6OtherAnswer = question6AnsOtherArray.join(", ");
alert(question6Answer);
alert(question6OtherAnswer);
});
关于javascript - 在 Javascript 中获取选定复选框及其关联文本区域的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34523235/