如何使用 jQuery 将选中复选框的值添加到 textarea？答案

【问题标题】：How to add value of checked checkbox to textarea using jQuery?如何使用 jQuery 将选中复选框的值添加到 textarea？
【发布时间】：2009-04-25 02:35:52
【问题描述】：

如何使用 jQuery 删除 textarea 中未选中 (one_1 one_3 one_4) 时从 input_one 获取的文本，并在选中时将其再次添加到 textarea 中？

代码如下：

<div id="input_one">
  <input type="checkbox" value="one">
  <input type="checkbox" value="one_1">
  <input type="checkbox" value="one_2">
  <input type="checkbox" value="one_3">
  <input type="checkbox" value="one_4">
</div>
<div id="input_two">
  <input type="checkbox" value="two_1">
  <input type="checkbox" value="two_2">
  <input type="checkbox" value="two_3">
  <input type="checkbox" value="two_4">
  <input type="checkbox" value="two_5">
</div>    
<textarea id="get_checked"></textarea>

例如 textarea 值应该是one one_3 two_4

【问题讨论】：

嗯，这和这个问题很相似：stackoverflow.com/questions/786142/…
我们又见到了 altCognito 先生。我打算把他链接到我们今天早些时候回答的同一个页面，哈哈。我们没有生命……
如此真实，如此真实，我们的时间表必须匹配或其他。 :)

标签： javascript jquery html checkbox text

【解决方案1】：

您可以使用:checked 选择器选择checked 复选框，并使用.map() 将复选框数组的项替换为它的值。

$("#input_one :checkbox, #input_two :checkbox").change(function() {   
    var text = $("#input_one :checked, #input_two :checked").map(function() {
        return this.value;
    }).get().join(" ");
    $("#get_checked").val(text);
});

$(":checkbox").change(function() {   
    var text = $(":checked").map(function() {
        return this.value;
    }).get().join(" ");
    $("#get_checked").val(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
    <input type="checkbox" value="one" />
    <input type="checkbox" value="one_1" />
    <input type="checkbox" value="one_2" />
    <input type="checkbox" value="one_3" />
    <input type="checkbox" value="one_4" />
</div>
<div id="input_two">
    <input type="checkbox" value="two_1" />
    <input type="checkbox" value="two_2" />
    <input type="checkbox" value="two_3" />
    <input type="checkbox" value="two_4" />
    <input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>

正如你在question 中所说，结果文本以空格分隔。

【讨论】：

【解决方案2】：

希望对你有帮助

function updateTextArea() {
    var allVals = [];
    $('#input_one :checked,#input_two :checked').each(function () {
        allVals.push($(this).val());
    });
    $('#get_checked').val(allVals);
}
$(function () {
    $('#input_one input,#input_two input').click(updateTextArea);
});

jsfiddle

【讨论】：