在Javascript中获取所选复选框及其关联文本区域的值

Get values of selected checkboxes and their associated textareas in Javascript

本文关键字：关联 文本 区域 复选框 Javascript 获取      更新时间：2023-09-26

我有一个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);
});

从您的this上下文步骤返回到您的父级，然后获取下一个文本元素。

$('input[type="checkbox"]').on('click', function() {
    if ( $(this, ':checked') ) {
      $(this).val();
      $(this).parent().next('textarea').val();
    )
}

最后尝试以下函数：

$("#id_SubmitForm").click(function() {
  question6AnsArray = [];
  // To get all the selected checkbox values and their associated textareas
  $('input[name="question6"]:checked').each(function() {
    question6AnsArray.push(this.value);
    question6AnsArray.push($('.form-control').val());
  //Here I want to get the value for the textarea.
  });
    var question6Answer = question6AnsArray.join(", ");
    alert(question6Answer);
});
相关文章：