How to use jQuery to get the checked checkboxes values, and put it into a textarea immediately?
Just like this code:
<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>
If the id="c_d" is updated by Ajax, the below of altCognito's code doesn't work. Is there any good solution?
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());
}
});
});
Edit: Oh, okay.. there you go... You didn't have the HTML up before. Anyways, yeah, I thought you meant to put the value in a textarea when it gets clicked. If you want the checked checkboxes' values to be put into the textarea (maybe with a nice comma-seperation) on page load it would be as simple as:
$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});
Edit 2 As people have done, you can also do this to shortcut the lengthy selector I wrote:
$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});
... I totally forgot about that shortcut. ;)
Anyway, you probably need something like this:
var val = $('#c_b :checkbox').is(':checked').val();
$('#t').val( val );
This will get the value of the first checked checkbox on the page and insert that in the textarea with id='textarea'.
Note that in your example code you should put the checkboxes in a form.
If you want to insert the value of any checkbox immediately as it is ebing ckecked then this should work for you
$(":checkbox").click(function(){
$("#id").text(this.value)
})
Here's one that works. (see the example)
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
Some number of months later another question was asked in regards to how to keep the above working if the ID changes. Well, the solution boils down to mapping the updateTextArea function into something generic that uses classes, and to use the live function to monitor the DOM for those changes. Sorry, I'm not really up to writing the example at the moment.
$(document).ready(function() {
$(':checkbox').click(function(){
var cObj = $(this);
var cVal = cObj.val();
var tObj = $('#t');
var tVal = tObj.val();
if( cObj.attr("checked")) {
tVal = tVal + "," + cVal;
$('#t').attr("value", tVal);
} else {
//TODO remove unchecked value.
}
});
});
I'm trying to figure out how to remove the values from the textarea once a checkbox is unchecked... Could anyone help please? Thank you in advance!
$(document).ready(function() {
$(':checkbox').click(function(){
var cObj = $(this);
var cVal = cObj.val();
var tObj = $('#t');
var tVal = tObj.val();
if( cObj.attr("checked")) {
tVal = tVal + "," + cVal;
$('#t').attr("value", tVal);
} else {
//TODO remove unchecked value.
}
});
});
Thanx altCognito your solution helped.... we can also do this by using nam eof the checkboxes...
function updateTextArea() {
var allVals = [];
$('[name=chkbox]:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)} $(function() { $('#c_b input').click(updateTextArea); updateTextArea(); });
This one helps too