We Keep Coding

Different way to generate divs via checkbox

Currently I am using the below method using JS to generate a block of text in a right column when a check box is clicked ticked in a left column.
This has been working fine, however each time I need to add a check box, I need to add a new class and new formContainer element. With the original 3 I had, wasn't a big deal. But now that I'm up to 10 and growing, getting a bit cumbersome.
What better possibilities exist to generate a div/block of text on a different part of the page as a result of a ticked check box?
Check Box
<input id="chk" data-detail="<br>Right 1" class="chkbox" type="checkbox" value="results" />1
Creating individual class
<div class="formContainer"></div>
Script
<script>
$('.chkbox').on('click',function(){
if($(this).is(':checked'))
{
$('.formContainer').html('<div class="new">'+$(this).data('detail')+'</div>');
}
else
{
$('.formContainer').html('');
}
});
</script>

If you are wanting them in columns you can generate them using bootstrap gridsystem.
<div class="formContainer>
<div class="container">
<div class="row">
<div class="col-m-4"></div>
<div class="col-m-4"></div>
<div class="col-m-4"></div>
</div>
<div class="row">
...
</div>
</div>
</div>
If you are wanting to keep them in the same column you could just use .append()
$('.formContainer').append('<div class="new">'+$(this).data('detail')+'</div>');
These can be used together to generate a fluid system or just the append can be used to keep adding divs to your formContainer

I would suggest appending a form after your checkbox using the Jquery function .after(newElement);
Play with it on codepen
Html:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.formContainer{
height: 50px;
width: 100%;
background-color: gray;
}
</style>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
JQuery:
$(document).ready(function(){
$('.checkboxesThatAppends').click(function(){
var associatedFormId = $(this).attr('data-associated-form-id');
if(associatedFormId){
//if there is a form container associated with this checkbox already
//then let's remove that form.
//and remove the association from the checkbox
$('#'+associatedFormId).remove();
$(this).attr('data-associated-form-id', '');
}else{
//generate an Id for the new form to attach.
var newId = new Date().getTime();
$(this).attr('data-associated-form-id', newId);
$(this).parent().after('<div id="'+newId+'" class="formContainer"></div> ');
}
});
});

You can just use jQuery's append() and remove() methods in combination with wrapping HTML elements to achieve this effect.
JSFiddle: https://jsfiddle.net/xuc4tze0/1/
HTML
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 1" class="chkbox" type="checkbox" value="results" />1
</div>
</div>
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 2" class="chkbox" type="checkbox" value="results" />2
</div>
</div>
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 3" class="chkbox" type="checkbox" value="results" />3
</div>
</div>
CSS
.row {
display: flex;
width: 400px;
}
.left, .right {
flex: 0 0 50%;
}
Javascript / jQuery
$('.chkbox').on('click', function() {
if ($(this).is(':checked'))
// Find the row and add the 'right' column
$(this).closest('.row').append('<div class="right">' + $(this).data('detail') + '</div>');
} else {
// Find the 'right' column and remove it
$(this).closest('.row').find('.right').remove();
}
});

Depending on your need and the content of the divs I got a couple of suggestions :
Modal popups. If you these divs are just notifications then a popup would do (but doubt this is what you need).
List group, use bootstrap's neat class list group to show the needed info in an <ul> element, the JS that comes with these can be neat as well with special animations.
Use tooltips on each checkbox instead of getting a whole div appearing.
Last suggestion which I like least is putting all of your div's in a single container div on the right. Fix its width and height and set overflow attribute so you can scroll up and down the shown divs

Manipulate button properties from a template in a JS node

I have an HTML template consisting of a DIV that contains three buttons.
<template ID="template3buttons">
<div ID="container3buttons" class="boxes">
<div ID= "sunShadeUp" class="boxes">
<input type="button"
id="SunshadeButtonUp"
class="SunshadeSmallButton"
onclick="GenericAction('ENO_ShutterStop($all)', 'all')"
value=""/>
</div>
<div ID= "sunShadeStop" class="boxes">
<input type="button"
id="SunshadeButtonStop"
class="SunshadeSmallButton"
onclick="GenericAction('ENO_ShutterStop($all)', 'all')"
value=""/>
</div>
<div ID= "sunShadeDown" class="boxes">
<input type="button"
id="SunshadeButtonDown"
class="SunshadeSmallButton"
onclick="GenericAction('ENO_ShutterStop($all)', 'all')"
value=""/>
</div>
</div>
</template>
I use JS to generate many copies of the template, which are eventually inserted into appropriate DIVs.
function create3Button(cellButtonId) //create boxes with 3 buttons each
{
var template3buttons = document.querySelector('#template3buttons');
var insertionPoint= document.getElementById(cellButtonId);
var clone = document.importNode(template3buttons.content, true);
insertionPoint.appendChild(clone);
}
Now, i need to manipulate the content of the 'onclick' tag for each copy of the template depending on the insertion point. I understand that getElementById() does not work for DOM nodes. What are the alternatives?

If you use jQuery you can do this:
$("[id*=sunShade]").children().click(function() {
alert( "Handler for .click() called." );
});

Javascript check bootstrap checkbox by id

I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.

The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.

http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.

Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).

add onto checked values in checkbox via jquery

Hi Im trying to add onto a checkbox's values selected, so maintain the selected values but add other selected values. however the attribute doesn't add selected values. here is my attempt (p.s how would I in turn remove values selected and keep existing values selected?) thanks
$('.add_button').click(function() {
var values = $('input:checkbox:checked.ssremployeeids').map(function () {
return this.value;
}).get();
$('.ssremployeeid').attr('selected',values);
<div class="grs-multi-select-area" style="height:120px;width:150px;">
<div class="grs-multi-select-box ">
<input id="ssrBox" class="ssremployeeid" type="checkbox" name="ssremployeeid[]"
value="1312">
Amanda Becker
</div>
<div class="grs-multi-select-box "> // same as above I just collapsed it for viewing purposes
<div class="grs-multi-select-box ">
<div class="grs-multi-select-box ">
</div> //closes main div
});

I am still not sure if I understood you question correctly, but based one what I understood here's something you could try:
Sample Fiddle: http://jsfiddle.net/HFULf/1/
HTML
<div id="div1">
<input type="checkbox" name="cb1" value="val1" checked="checked" />
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<div id="div2">
<input type="checkbox" name="cb1" value="val1"/>
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<button id="btn1">Add Selected</button>
<button id="btn2">Remove Selected</button>
jQuery
//add selected values from first set of check-boxes to the second set
$('#btn1').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',true);
});
});
//remove values from second set of check-boxes if selected in first one
$('#btn2').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',false);
});
});
Hope, this will help you a little if not solve your problem entirely.

How to change the text of a <label> which is hidden

I want to change the text of a label whose parent has its display hidden. I am not able to access the label because of its parents visibility.
I would like to know is there a way to change the text of this label without the changing the visibility of the parent.
I tried changing the visibility of the label and changing the text and hiding it back, did not work.
$(document).ready(function(){
$("#394").find(".name").children("label").text("Home");
});
<div class="sample1" style="display: none;">
<div id="394">
<div class="name">
<label>house.jpg</label>
</div>
</div>
</div>
Any suggestions/ideas?
Answer:
First, Thank you all for the response.
I fixed the issue.
This is the change I made and it worked.
$(document).ready(function(){
$(".sample1").find(".name").children("label").text("Home");
});
<div class="sample1" style="display: block;">
<div style="display: none;" id="398">
<div class="name">
<label>Sample</label>
</div>
</div>
</div>

Sample
(Updated) http://jsfiddle.net/SXLnt/1/
(Old) http://jsfiddle.net/SXLnt/
Solution
$("#394 label").text("new_house.jpg");
$(".sample1").show(); // show hidden result
Sample HTML
<form id="parent_form" style="display: none; visibility: hidden;">
<label for="male" id="lb_male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female" id="lb_female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
Sample JS (jQuery)
$("#lb_male").text("Man"); // Change text 1
$("#lb_female").text("Woman"); // Change text 2
//$("#parent_form").show(); // Show parent
Sample DOM result

IF the label's ID is lblSomething, you could do it in JQuery as so ...
$("lblSomething").val("Changed value")
Hope it helps.

If what you posted is your full code, it looks like you are missing a closing tag on your outer div. Try this:
<div class="sample1" style="display: none;">
<div id="394">
<div class="name">
<label>house.jpg</label>
</div>
</div>
</div>