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


Solution:1

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.


Solution:2

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


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »