Develop Reference

reactivate a checkbox in a dynamic list jquery

I'm trying to reactivate a checkbox in a dynamic list and I do not succeed, the list update its contents every x time.
<div class="content">
<ul class="mylist">
<li><input type="checkbox" class="check" checked>0</li>
<li><input type="checkbox" class="check">1</li>
<li><input type="checkbox" class="check">2</li>
<li><input type="checkbox" class="check">3</li>
<li><input type="checkbox" class="check">4</li>
<li><input type="checkbox" class="check">5</li>
<li><input type="checkbox" class="check">6</li>
<li><input type="checkbox" class="check">7</li>
</ul>
</div>
// checkbox
var checkbox;
var list = [2,3,4,5,6,7,8,9];
//
setInterval(function(){
$('.mylist li').remove();
for(i in list) {
$('.mylist').append('<li><input type="checkbox" class="check">' + i + '</li>');
}
if(typeof checkbox === 'object')
checkbox.prop('checked', true);
}, 3000);
$('.check').on('click', function(){
if ($(this).is(":checked")) {
checkbox = $(this);
}
});
https://jsfiddle.net/ywkr5ezp/3/

The reason this is happening is because the input element stored in checkbox is not the same as the new input element that you are creating. When you store an element in a variable it is storing that specific instance of the element.
One way around this would be to give the checkbox elements id's that you could then reference and recheck.

How to check parent checkbox if all children checkboxes are checked

I want to make a separate function from my checkall and uncheckall button (I already have one working).
This time I want my checkall/uncheckall chekcbox checked if all children checkboxes are checked.
I was thinking maybe I can compare my checked children checkbox length from children checkbox length.
function testFunction() {
$('.cb').change(function(){
var checkedChildCheckBox = $('.cb:checked').length;
var numberOfChildCheckBoxes = $('.cb').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes){
$("#checkAll").prop('checked', true);
}
})
}
Can someone give me some ideas on this? Still my checkall/uncheckall checkbox doesn't changed to checked. Conditions made was true in if statement.
Or maybe my idea of comparing length is not gonna work?
.cb my class for children checkbox
#checkall my id for parent or checkall/uncheckall checkbox

It is already working I guess - issue is putting the event listener inside a function (don't know why is that the case).
Anyway, see demo below:
var numberOfChildCheckBoxes = $('.cb').length;
$('.cb').change(function() {
var checkedChildCheckBox = $('.cb:checked').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes)
$("#checkAll").prop('checked', true);
else
$("#checkAll").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkAll">All</label>
<input type="checkbox" id="checkAll" />
<br/>
<br/>
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />

Try below code
Js
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
Html
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>

Setting checkboxes using Jquery

I have a dynamic form that has a number of checkboxes in it. I want to create a "select all" method that when clicked automatically checks all the boxes in the form.
[x] select all //<input type="checkbox" id="select-all"> Select all
[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">
[submit]
My jQuery is as follows:
$(document).ready(function(){
$('#select-all').click(function() {
if (this.checked)
{
console.log("Check detected");
$('.checkbox1').each(function() {
console.log('Checking the item with value:' + this.value );
$(this).prop('checked', true);
console.log(this);
});
} else {
console.log("not checked");
}
});
});
My console output:
> Check detected
> Checking the item with value:1
> <input type=​"checkbox" id=​"1" class=​"checkbox1" value=​"1">​
> Checking the item with value:2
> <input type=​"checkbox" id=​"2" class=​"checkbox1" value=​"2">​
I am able to loop through each item however, I am not sure how to actually set the checkbox to checked.
The part I am struggling with is the actual setting of the checked state, I know I need to use: .prop('checked',true) however, what do I use for the actual element? $(this) obviously does not work...
$(this).prop('checked', true);

Use this simple code
$(".checkAll").change(function(){
$('.checkbox1').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />
<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />

You are referring #select-all as (this.checked) ,You need to refer as $(this).
Secondly you can use :checked to find out if it is checked or not.
Thirdly you dont need to loop over $('.checkbox1'). jquery will match all elements and will update the attribute.
Below is the snippet which may be helpful
$(document).ready(function() {
$('#select-all').click(function() {
if ($(this).is(":checked")) {
console.log("Check detected");
$('.checkbox1').prop('checked', true)
} else {
$('.checkbox1').prop('checked', false)
}
});
// If select-all is selected and if one check box is unchecked ,
//then select-all will be unchecked
$('.checkbox1').click(function(event) {
if ($(this).is(':checked')) {
// #select-all must be checked when all checkbox are checked
} else {
if ($('#select-all').is(':checked')) {
$('#select-all').prop('checked', false)
}
}
})
});
JSFIDDLE

demo link
js code
$('.checkbox1').click(function(event) {
var _this = $(this);
if (!_this.prop('checked')) {
$('#select-all').prop('checked', false)
}
})
$('#select-all').click(function() {
var _this = $(this);
var _value = _this.prop('checked');
console.log("Check detected");
$('.checkbox1').each(function() {
console.log('Checking the item with value:' + this.value);
$(this).prop('checked', _value);
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all
<input type="checkbox" id="1" class="checkbox1" value="1">
<input type="checkbox" id="2" class="checkbox1" value="2">

Just to answer this question. I tried the various solutions offered and they appeared not to work. However I then realised that due to using Jquery Uniform I needed to add an additional bit of code to get the display to work correctly:
This post was helpful.
Thank you to all who have taken the time to answer.
My final code:
$(document).ready(function(){
$('#select-all').click(function() {
if (this.checked)
{
$('.checkbox1').prop('checked', true);
} else {
$('.checkbox1').prop('checked', false);
}
$.uniform.update('.checkbox1');
});
});

Checkbox - Getting multiple check boxes checked on checking only one

I am trying to implement a check box which checks all the check boxes on the page. But when I changed the code slightly, it stopped working. I want to keep the changed code and still want the functionality to be working. Kindly help!
* Kindly ignore the missing tags if any. It is correct unless I made mistake in editing the question.
<script>
function toggle(source) {
checkboxes = document.getElementsByName('qchecked[]');
for(var i=0, n=checkboxes.length;i<n;i++){
checkboxes[i].checked = source.checked;
}
}
</script>
<html>
/* Code for the check box which when checked, checks all the checkbox. */
<input type='checkbox' class='css-checkbox' id='checkbox' onClick='toggle(this)'/>
<label for='checkbox' class='css-label lite-y-green'></label>
/* Code for the check boxes which should be checked when the check box with id=checkbox is checked.
I changed the code from INITIAL CODE to CHANGED CODE for some other purpose and the toggle stopped working.
Now clicking on that one check box is not marking or un marking all the check boxes. */
<!-- INITIAL CODE -->
<input type='checkbox' id='yes_checkbox[$index]' class='css-checkbox' name='qchecked[]'/>
<label for='yes_checkbox[$index]' class='css-label lite-y-green'></label>
<!-- CHANGED CODE -->
<input type='checkbox' id='yes_checkbox[$index]' class='css-checkbox' name='qchecked[$array6[qID]]'/>
<label for='yes_checkbox[$index]' class='css-label lite-y-green'></label>
</html>

Instead of name, give a class to all elements and you should use by
getElementsByClassName('your_class');

Since you name of inputs are different, you can make use of common class
checkboxes = document.getElementsByClassName('css-checkbox');

Try this..
<ul class="chk-container">
<li><input type="checkbox" id="selecctall"/> Selecct All</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>
<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>
</ul>
$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if(this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
demo:https://jsfiddle.net/go1gL743/

Check all other checkboxes when one is checked

I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).
I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
Could you tell me some simple approach how to get it work? Thanks a lot!

demo
updated_demo
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});

HTML:
<form>
<label>
<input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>
JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/

Thanks to #Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.
FIDDLE
HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
SCRIPT
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
And now add this to manage the master checkbox as well...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});

Add extra script according to your checkbox group:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
HTML Code:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>

use this i hope to help you i know that this is a late answer but if any one come here again
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
Master CheckBox:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
Child CheckBox:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="#employee.Id" />```

You can use jQuery like so:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
A fiddle.

var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
In HTML:
Master Check box <input type="checkbox" onClick="toggle(this);">
Other Check boxes <input type="checkbox" name="ALL">

You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});

I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.
Here is the basic idea
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
if there are other elements that are siblings, than you would beed to filter the siblings
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
jsFiddle