How to add value of checked checkbox to textarea using jQuery?

Question

How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?

The code is below:

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

For example textarea value should be one one_3 two_4

Umn, this is very similar to this question: http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery — cgp, Apr 25 '09 at 02:45
We meet again Mr. altCognito. I was going to link him to the same page that we both just answered earlier today, haha. We have no lives... — KyleFarris, Apr 25 '09 at 03:10

score 1 · Answer 1 · answered May 31 '13 at 12:37

1

Hope this helps

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

answered May 31 '13 at 12:37

Pundit Scholar

64
2

This worked for me as expected. Simple easy to read code. Thx Pundit. – Avi Jan 27 '23 at 01:04

score 1 · Answer 2 · edited May 23 '17 at 12:34

You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.

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

As you said in question, the resutl text splited by space.

How to add value of checked checkbox to textarea using jQuery?

2 Answers2