使用Javascript获取所选复选框及其关联文本区的值

Question

我有一个HTML表单。在这个表单中，我有5个复选框，每个复选框都有一个关联的textarea。 所以我想获取只有选中的复选框及其关联的textarea文本的值。我能够获得选中复选框的值，但我无法弄清楚获取相关文本区域值的方法。

我的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

Answer 1

$("#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); 
}); 

Answer 2

链接尝试以下功能在最后：

$("#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); 
}); 

Answer 3

从您的上下文步骤返回到您的父母，然后抓住下一个文本元素。

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