Coder Perfect

In jQuery, how do I get the values of checkboxes?

Category: html

Tag: , ,

Problem

How can I use jQuery to grab the values of ticked checkboxes and put them into a textarea right away?

This code, for example:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

The altCognito code below does not work if the id=”c d” is modified using Ajax. Is there a viable alternative?

Asked by lanqy

Solution #1

Here’s an example of one that works:

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

After a few months, a new query was raised about how to maintain the above running if the ID changed. The solution is to rewrite the updateTextArea function to be more flexible and use CSS classes, and then use the live function to watch for changes in the DOM.

Answered by cgp

Solution #2

You may also get the values of all checked checkboxes in a comma-separated string. This will make it easy for you to send it to SQL as a parameter.

Here’s an example that returns all chosen checkbox values in a comma-separated string with the name “chkboxName.”

Here’s the javascript code.

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(function () {
    return this.value;
  }).get().join(","));
}

Here’s an example of HTML.

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

Answered by Mohamed ElSheikh

Solution #3

Your question is quite vague but I think this is what you need:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Oh, well, there you have it… Before, you didn’t have the HTML up. Anyway, I was under the impression that you meant to put the value in a textarea when the button was clicked. It’s as simple as: If you want the values of the ticked checkboxes to be put into the textarea (perhaps with a lovely comma-separation) on page load, it’s as simple as:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Edit 2: As others have suggested, you may use this to shorten the lengthy selection I created:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

… I had completely forgotten about that shortcut.

Answered by KyleFarris

Solution #4

Thank you, altCognito, for your solution. We can alternatively do this by referring to the checkboxes by their names:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

Answered by Harpreet Bhatia

Solution #5

Since I came here looking for a slightly different solution, the following may be useful. My script required to loop through input elements and return their values (for the jQuery.post() method), however checkboxes were providing their values regardless of whether they were selected. My solution was as follows:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Usage:

jQuery(".element").input_val();

The input val method only returns a value if the specified input field is a checkbox. The value is returned for all other elements, regardless of whether they are checked.

Answered by Andy

Post is based on https://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery