Develop Reference

checkboxes won't check but each checkbox is registering first click and sending data to server

I have a javascript function that retrieves checkbox values and sends data to server on click:
$(function() {
$("[name=check]").on("click", function() {
var res = {};
var vals = $("[name=" + this.name + "]").each(function()
{
res[this.value] = this.checked;
}).get();
$.getJSON('/_filter', {
b: JSON.stringify(res),
}, function(data) {
$('.results').html(data.results)
});
return false;
});
});
In my test environment, I initialize all checkboxes to be unchecked. I click the first checkbox and data is sent to server and reported back as True for first checkbox and false for the others. This works as expected, however, the first checkbox remains unchecked. Also, if I click the first checkbox again, nothing happens. I would expect for the server to now report back false for the first checkbox and false for the others. If I click the second checkbox the server reports back true for the second checkbox and false for the others but has the same issue the first checkbox had.
Any ideas as to why this may be happening?
Also, here is the server side(flask):
#app.route('/_filter')
def filterthis():
checkbox = request.args.get('b')
checkbox_dict = json.loads(checkbox)
first = checkbox_dict['first']
second = checkbox_dict['second']
third = checkbox_dict['third']
fourth = checkbox_dict['fourth']
output= str(first) + str(second) + str(third) + str(fourth)
return jsonify(results=output)
And here is the index.html:
<ul class="filterSection">
<li>
<strong>Show:</strong>
<input type="checkbox" name="check" value="first"/>
<label>First</label>
</li>
<li>
<input type="checkbox" name="check" value="second"/>
<label>Second</label>
</li>
<li>
<input type="checkbox" name="check" value="third"/>
<label>Third</label>
</li>
<li>
<input type="checkbox" name="check" value="fourth"/>
<label>Fourth</label>
</li>
</ul>
<div class="results">{{ results|safe }}</div>

when you click on checkbox the checkbox become checked, but you are using return false which prevent updation of dom.
if you wish get rid of return statement.
$(function () {
$("[name=check]").on("click", function (event) {
var res = {};
var vals = $("[name=" + this.name + "]").each(function () {
res[this.value] = this.checked;
}).get();
$.getJSON('/_filter', {
b: JSON.stringify(res),
}, function (data) {
$('.results').html(data.results)
});
});
});
<ul class="filterSection">
<li>
<strong>Show:</strong>
<input type="checkbox" name="check" value="first"/>
<label>First</label>
</li>
<li>
<input type="checkbox" name="check" value="second"/>
<label>Second</label>
</li>
<li>
<input type="checkbox" name="check" value="third"/>
<label>Third</label>
</li>
<li>
<input type="checkbox" name="check" value="fourth"/>
<label>Fourth</label>
</li>
</ul>

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>

De-selecting a select all checkbox

I have a checkbox that will select all, at the moment if I press it, it will select all the the options(which is good!), then if I deselect one of them it doesn't deselect the Select All option. Any help in how to do this would be gratefully appreciated.
<span class="glyphicon glyphicon-check"></span>
<label for="sel1">Select days:</label><br />
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>
</div>
Script I am currently using to Select All:
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
});
$(document).ready(function){
}

Example:
http://jsfiddle.net/0e018w0y/
You're most of the way there.
I'd attach a "change" event listener to all the checkboxes, confirming that (on change) whether all the checkboxes are selected or not... (FYI you're using checkboxes and not radio buttons. Radio buttons only allow 1 to be selected at a time.)
// On change of any (not "Select All" checkbox)
$('input[name="selected[]"]').change(function () {
var selectAll = true;
// Confirm all checkboxes are checked (or not)
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', selectAll);
});
In the example I've tried to follow your convention for checking if things are selected or not etc - except I've used "change()" rather than "click()" (which captures any change event, not just mouse-clicks).
Line by line:
$('input[name="selected[]"]').change(function () {
...
}
This captures the change event on all select boxes. You could use classes or a name convention to identify the checkboxes to attach it to.
var selectAll = true;
The scope of this variable reaches the nameless function provided to the .each(...) call which follows. We're using this to track whether every checkbox is checked or not.
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
This checks every checkbox, see if any are not checked.
Then we update the "Select All" checkbox appropriately.
Looking at it again (2 minutes later), I can see this could be reduced actually:
var allSelected = ($('input[name="selected[]"]:not(:checked)').length === 0);
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', allSelected);
I've not tested if this is faster ... I've just offloaded the checking of "is checked" to jQuery itself. The "length" property returns how many elements match the criteria - ":not(:checked)" does what you'd expect, matches only the aforementioned inputs which are not checked.
If the count is not equal to 0, we deselect the "Select All" checkbox.
Example:
http://jsfiddle.net/zyxgm2kz/

Try this:
You need to bind a change listener for all the days checkbox and if all the checkboxes are checked then you can play with select all checkbox checked property.
$(document).ready(function () {
var allCB = $('input[name="selected[]"]');
var mainCB = $('input[name="all"]')
mainCB.on('click', function () {
var status = $(this).is(':checked');
allCB.prop('checked', status);
});
allCB.on('change', function () {
var status = $('input[name="selected[]"]:checked').length === allCB.length;
$('input[name="all"]').prop('checked', status);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>

you can try this one:
$(document).ready(function() {
$('input[name="all"],input[name="title').click(function(event) { //on click
if(this.checked) {
$('input[type="checkbox').each(function() {
this.checked = true;
});
}else{
$('.input[type="checkbox').each(function() {
this.checked = false;
});
}
});
});
DEMO FIDDLE

$('input[name="all"],input[name="title"]').bind('click', function () {
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
var checkbox = $(':checkbox').not('#all');
$(checkbox).change(function () {
checkbox.each(function () {
if ($(this).is(':checked')) {
} else {
$(':checkbox#all').prop('checked', false)
}
})
})
Get the checkbox except the all then check if one is uncheck remove the check from all
DEMO

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/