Develop Reference

How to dynamically get values from multiple check-boxes (jquery) and copy it to textarea?

I have an checkbox "Cut image" which will on select expand four more check-boxes (up, left, right, down) where you can select where image will be cut.
By default, these expanded check-boxes are selected.
What I want to achieve is:
If "cut image" checkbox is selected (and by default all other expanded check-boxes) append text value "Cut image: up, left, right, down" to textarea
If one of the expanded check-boxes are not selected (lets say "up"), remove it's value from appended text in textarea, and show only selected ones, "Cut image: left, right, down"
Html
<input type="checkbox" id="cut-image">
<label for="">Cut image</label>
<div id="main-group">
<input type="checkbox" class="cut-image-up" checked>
<label for="">up</label>
<input type="checkbox" class="cut-image-left" checked>
<label for="">left</label>
<input type="checkbox" class="cut-image-right" checked>
<label for="">right</label>
<input type="checkbox" class="cut-image-down" checked>
<label for="">down</label>
</div>
<textarea name="" id="checkbox-values" cols="20" rows="10"></textarea>
Javascript
$(function(){
$('#cut-image').on('change', function(){
$('#main-group').toggle();
if($(this).is(':checked')){
$('#checkbox-values').val('Cut image (up, left, right, down)');
}else{
$('#checkbox-values').val('');
}
});
})
Here is an jsfiddle also.
I would appreciate any suggestions on how to achieve this behavior.
Thanks.

There are always about a billion ways to do things like this. It seems to me like you need a couple of things:
A way to associate each checkbox with its direction
Something that listens for changes in the checkboxes -- as they are checked and unchecked
Every time a checkbox is changed, we grab all the checked checkboxes, and reattach the directions to the textbox
Here's an updated version. Note the slightly different HTML...
$(function() {
$('#cut-image').on('change', function() {
$('#main-group').toggle();
if ($(this).is(':checked')) {
setCheckboxValues();
} else {
$('#checkbox-values').val('');
}
$('.cut-image').on('change', function() {
setCheckboxValues()
})
});
})
function setCheckboxValues() {
const allCheckedText = $('input.cut-image:checked').map(function() {
return this.value;
}).get()
$('#checkbox-values').val(`Cut image (${allCheckedText.join(', ')})`);
}
#cut-image,
#main-group,
#checkbox-values {
display: block;
margin: 10px 0;
}
#main-group {
display: none;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cut-image">
<label for="">Cut image</label>
<div id="main-group">
<input type="checkbox" class="cut-image" checked value="up">
<label for="">up</label>
<input type="checkbox" class="cut-image" checked value="left">
<label for="">left</label>
<input type="checkbox" class="cut-image" checked value="right">
<label for="">right</label>
<input type="checkbox" class="cut-image" checked value="down">
<label for="">down</label>
</div>
<textarea name="" id="checkbox-values" cols="20" rows="10"></textarea>

This won't completely take care of all the various scenarios but will give you a good start point
Add values to the checkboxes and build array of those values using jQuery map(). Then join() those array values to add to the text
<input type="checkbox" class="cut-image-up" value="up" checked>
JS
$('#cut-image').on('change', function() {
$('#main-group').toggle();
if ($(this).is(':checked')) {
// array of checked checkbox values
var directions = $('#main-group :checkbox:checked').map(function() {
return this.value
}).get().join(', ');
$('#checkbox-values').val('Cut image (' + directions + ')');
} else {
$('#checkbox-values').val('');
}
});
DEMO

Display text in order in which a checbox is checked using jquery

**I have a form containing a list of checkboxes. I wish to display some text corresponding to each check box in the order of selection of the check box in another block.And when I deselect a checkbox that text should disappear and if I reselect it it should appear below the existing text. I already checked though many questions in this site. Everywhere there's explanation for the text to appear but not in the order in which the checkbox is checked rather in the order of the checkboxes themselves. I want to do this using html and jquery. Any help towards the direction would be appreciable **

http://jsfiddle.net/jinal1482/Lfuzkkvz/
You can replace 'a' and 'b' with your value or you can retrieve value by other attribute as well.
Html code :
<input type='checkbox' onclick="updateList('a',this)" />
<input type='checkbox' onclick="updateList('b',this)" />
Javascript code :
var options = [];
function updateList(obj,source){
if($(source).attr('checked')){
options.push(obj);
}
else{
options= $.grep(options, function( a ) {
return a !== obj;
});
}
console.log(options);
}

Use a combination of id tag and attribute data-id with the same value in order to connect checkbox and text
http://jsfiddle.net/edobs5cf/
HTML:
<div id="checkbox_div">
<input type='checkbox' data-id="#txt-1" />text 1<br/>
<input type='checkbox' data-id="#txt-2" />text 2<br/>
<input type='checkbox' data-id="#txt-3" />text 3<br/>
<input type='checkbox' data-id="#txt-4" />text 4<br/>
</div>
<div id="text">
<div id="txt-1">text 1</div>
<div id="txt-2">text 2</div>
<div id="txt-3">text 3</div>
<div id="txt-4">text 4</div>
</div>
CSS:
#text div{display:none}
JQ:
$('#checkbox_div input[type="checkbox"]').click(function () {
var $ch = $(this);
var $id = $ch.data('id');
if ($ch.is(':checked')) {
// ensures that the text appears at the end of the list
$($id).appendTo($('#text'));
$($id).show();
} else $($id).hide();
})

Here's a simple example:
HTML:
<input type="checkbox" value="Apple">Apple</input>
<input type="checkbox" value="Banana">Banana</input>
<input type="checkbox" value="Mango">Mango</input>
<input type="checkbox" value="Orange">Orange</input>
<input type="checkbox" value="Grape">Grape</input>
<ul></ul>
JavaScript (jQuery):
$("input").on("change", function (e) {
$("ul").html("");
$("input:checked").each(function () {
$("ul").append("<li>" + this.value + "</li>");
});
});
Given the details in the OP this should be what you're looking for. Basically when one of the inputs (checkboxes) change, we update our list by looping through each checked input. Depending on what you actually want the text to be you would need to modify this example. For each input I would consider putting the text you want to display when an input is clicked in a data attribute. Something like:
<input type="checkbox" value="Apple" data-text="Apples are yummy">Apple</input>
That way in the loop you could grab each inputs data-text attribute and display that instead.

Input field appear after selecting a check box. HTML

I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>

Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/

You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)

There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.

Showing, hiding checkboxes with jquery using fadeIn fadeOut

I am writing a form, it has checkboxes, and I wrote a script to show and hide them (specifically hide all other checkboxes when one of them is selected).
I reached this far when I need this to hide the input checkboxes, but what this code below is doing, is: it shows only 1 of checkboxes (the second one). Why, how can I hide both of the checkboxes at the same time ?
$('input:checkbox.individual' && 'input:checkbox.organization').stop(true,true).fadeIn("normal")
this is my html:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?<span class="form_required">*</span></label><br><br>
<input type="checkbox" name="entity_type" value="entity_project" class="project"/><label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" class="individual"/><label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" class="organization"/><label for="entity_organization" class="label_organization">Organisation</label>
</div>

Use a , in the selection string to select multiple groups of elements
$('input.individual:checkbox, input.organization:checkbox')
// ^ see here

Is this the effect you wanted to achieve?
http://jsfiddle.net/z37br/
HTML:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?
<span class="form_required">*</span>
</label>
<br><br>
<input type="checkbox" name="entity_type" value="entity_project" data-type="project"/>
<label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" data-type="individual"/>
<label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" data-type="organization"/>
<label for="entity_organization" class="label_organization">Organisation</label>
</div>
JS:
$('input').change(function() {
if ($(this).prop('checked')) {
var clickedCheckboxType = $(this).attr('data-type');
$('input').each(function() {
if (clickedCheckboxType != $(this).attr('data-type')) {
$(this).fadeOut('fast');
$(this).next().fadeOut('fast');
}
});
}
else {
$('input').fadeIn('fast');
$('input').next().fadeIn('fast');
}
});

Javascript - RadioButton, onClick not toggling checkboxes using ONLY native JS

edit: Contacted the prof; I'm not actually [supposed] to use jQuery on this assignment as the action on the form (e.g. prof's website) doesn't allow for it. Tyvm to all who replied so quickly and helpfully. Therefore, I am interested in a pure, native JS soln. to resolving these difficulties:
getting a group of checkboxes to toggle "on or off" based on whether the user clicks "Yes" or "No" radio button in a DOM-oriented form. Here's the HTML for (I: the radio buttons, II: the checkboxes):
I:) Radio Buttons
<label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()"></input>
<label>Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()"></input>
<label>No</label>
II.) Checkboxes
<fieldset>
<legend>Mailing List Subscriptions</legend>
<br />
<input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label>
<br />
<input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label>
<br />
<input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label>
<br />
<input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label>
<br />
<input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label>
<br />
<input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label>
<br />
</fieldset>
Using the rationale provided in posts such as Populating Checkboxes Based on Radio Button Click, which still uses jQuery, the best attempt I have made thus far is:
<script>
function subscribe(){
//var yesPlease = document.getElementById("rad1");
//var noThx = document.getElementById("rad2");
var arr = new Array["cor", "sof", "lspa", "cyn", "tos", "spal"];
//var hold = document.getElementById(arr[i]);
//if(hold.getAttribute(arr[i]).checked = true && arr[i] >= 1){
//document.getElementById("cor").innerHTML=hold.getAttribute("checked");
var hold = document.getElementsByName("mailinglist")[0];
for(var i = 0; i < arr.length; i++)
{
if(document.getElementById("rad1").checked==true)
{
hold.getAttribute(arr[i]).checked == true;
}
else if(document.getElementById("rad2").checked==true)
{
hold.getAttribute(arr[i]).checked == false;
}
}
}
</script>
When I load my document and click on either, nothing happens. Here's the screenshot of the concerned section if it helps:thanks:

Remove your inline javascript code and try attaching the event in the js file itself..
Try this
$('#rad1,#rad2').on('click', function() {
$('fieldset input[type="checkbox"]')
.prop('checked',this.value === 'Yes');
}
});
Check Fiddle

You need to an action handler when the radio button is clicked. So that the element attribute "checked" is correctly updated upon clicking.
The code below is edited from yours to just include the click handler on all input type radio
$(document).ready(function(){
function subscribe() {
$('input[type="radio"]').click(function(){
var yesPlease = document.getElementById("rad1");
var noThx = document.getElementById("rad2");
if(yesPlease.checked == true){
//check all boxes
$("#cor").prop("checked", true);
$("#sof").prop("checked", true);
$("#lspa").prop("checked", true);
$("#cyn").prop("checked", true);
$("#tos").prop("checked", true);
$("#spal").prop("checked", true);
}
else if(noThx.checked == true) {
//uncheck all boxes
$("#cor").prop("checked", false);
$("#sof").prop("checked", false);
$("#lspa").prop("checked", false);
$("#cyn").prop("checked", false);
$("#tos").prop("checked", false);
$("#spal").prop("checked", false);
}
});
}
subscribe();
​});​
JSFiddle: http://jsfiddle.net/MSZtx/

This simple code will solve the issue,
JavaScript in HEAD section :
$(document).ready(function(){
$(".radio-button").click(function(){
if($(this).val() == "No")
$(".checkbox-list input").attr("disabled", true);
else
$(".checkbox-list input").attr("disabled", false);
});
})
Also add, the jquery library CDN source before the above code.
Markup in BODY section :
<label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()" class="radio-button"></input><label> Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()" class="radio-button"></input><label> No</label>
<fieldset class="checkbox-list">
<legend>Mailing List Subscriptions</legend>
<br />
<input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label>
<br />
<input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label>
<br />
<input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label>
<br />
<input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label>
<br />
<input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label>
<br />
<input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label>
<br />
</fieldset>
There is also a 2nd option to do the same task,
JavaScript in HEAD section :
/* Solution - 2 */
function subscribe(ele)
{
if(ele == "No")
$(".checkbox-list input").attr("disabled", true);
else
$(".checkbox-list input").attr("disabled", false);
}
Also add, the jquery library CDN source before the above code.
Changes in MARKUP in body section :
<label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe(this.value)" class="radio-button"></input><label> Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe(this.value)" class="radio-button"></input><label> No</label>

Your Code is just working perfectly :- see here:- http://jsfiddle.net/LeWbR/2/
the only problem I could imagine
have you included jquery in your page .
where you have placed your JS function.
see the left hand side dropdown in JSfiddle, if you change the the value from no wrap(body) to
onDomReady or onLoad it won't work.
function subscribe() {
var yesPlease = document.getElementById("rad1");
var noThx = document.getElementById("rad2");
if(yesPlease.checked){
//check all boxes
$("#cor").prop("checked", true);
$("#sof").prop("checked", true);
$("#lspa").prop("checked", true);
$("#cyn").prop("checked", true);
$("#tos").prop("checked", true);
$("#spal").prop("checked", true);
}
else if(noThx.checked) {
//uncheck all boxes
$("#cor").prop("checked", false);
$("#sof").prop("checked", false);
$("#lspa").prop("checked", false);
$("#cyn").prop("checked", false);
$("#tos").prop("checked", false);
$("#spal").prop("checked", false);
}
}
​