Develop Reference

Accessing Datatable not visbile Checkboxes

I am trying to select multiple checkboxes from JS Datatable and submit them, then reseting them on a reset button click.
I already checked and tried the solution found in here and it just gets the not hidden elements : DataTable Checkboxes not getting value
$(document).ready(function () {
var table = $('#datatable-responsive').DataTable({
responsive: true
});
$('form').on('reset', function(e){
$('input[type="hidden"][name="deliver[]"').remove();
$('input[type="checkbox"]:checked').click();
return false;
});
$('form').on('submit', function(e){
let form = $(this);
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]:checked').each(function(){
// Create a hidden element
if(!$.contains(document, this)) {
form.append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
return false;
});
});
The problems are like following :
The submit only adds the current page checkboxes as hidden inputs, not all pages (the return false is there just for testing)
The reset button uncheck only current page checkboxes
The remove functions works as supposed
The click is used instead of switching prop because of the template I'm using (css staff)

The solution turned out to be related to usage of table as $()
$('form').on('reset', function(e){
var $form = $(this);
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function(){
// If checkbox doesn't exist in DOM
if(!$.contains(document, this)){
// If checkbox is checked
if(this.checked){
// Create a hidden element
this.checked = false;
}
}
});
});
$('form').on('submit', function(e){
var $form = $(this);
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function(){
// If checkbox doesn't exist in DOM
if(!$.contains(document, this)){
// If checkbox is checked
if(this.checked){
// Create a hidden element
$form.append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
}
});
});

How to Add and remove attribute if found specific class

I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});

All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/

Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo

Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle

Check all/uncheck all - checkboxes and tabular data

I am currently using Footables to display tabular data. Each row has a checkbox. There is one master checkbox that selects all. I am running into some difficulties. The table has a filter. When I apply the filter and try to check all checkboxes within that filter it wont work. Also, since I am able to check all checkboxes at once is there away to uncheck all checkboxes? EXAMPLE
Checkbox function
$(document).on('change','input[name="check_all"]',function() {
$("input[type=checkbox]").attr('checked', true);
});
$(document).on('change','select',function() {
$('input[type=checkbox]').attr('checked', false);
});
table filter
$(function () {
$('table').footable().bind({
'footable_filtering': function (e) {
var selected = $('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
},
'footable_filtered': function() {
var count = $('table.demo tbody tr:not(.footable-filtered)').length;
$('.row-count').html(count + ' rows found');
}
});
$('.clear-filter').click(function (e) {
e.preventDefault();
$('.filter-status').val('');
$('table.demo').trigger('footable_clear_filter');
$('.row-count').html('');
});
$('.filter-status').change(function (e) {
e.preventDefault();
$('table.demo').data('footable-filter').filter( $('#filter').val() );
});
});

use .prop() instead of .attr()
Check/uncheck only the visible rows
set the checked status to the select all checkboxes state
Try
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:visible input[type=checkbox]").prop('checked', this.checked);
});

try this one with not selecter which will select except the class .footable -filtered
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
});

Jquery Check all checkbox

Why does my check all button work once and doesn't work at 3rd click.
the check all button only works at firts click. I check the dom and its updating but the view does. What is the cause of the problem?
FIDDLE
jQuery('.sp_country').click(function () {
var checkbox = $(this).find(":checkbox"),
checked = checkbox.is(":checked");
checkbox.prop("checked", !checked);
});
jQuery('.sp_country input:checkbox').on('click', function (e) {
e.stopImmediatePropagation();
var checked = (e.currentTarget.checked) ? false : true;
e.currentTarget.checked = (checked) ? false : checked.toString();
});
jQuery('#bt_checkbox').click(function (e) {
e.stopImmediatePropagation();
if (jQuery(this).val() === 'Uncheck All') {
jQuery('#country input:checkbox').removeAttr('checked');
jQuery(this).val('Check All');
} else {
jQuery('#country input:checkbox').attr('checked', 'checked');
jQuery(this).val('Uncheck All');
}
});

fiddle Demo
Change
jQuery('#country input:checkbox').attr('checked', 'checked');
to
jQuery('#country input:checkbox').prop('checked', true);
Use .prop()
Read .prop() vs .attr()

Jquery Unable to select and deselect a td on clicking it

I have written 2 jquery functions. Lines 1-11 is the first one which binds mouseover event on mousedown to get the effect of click and drag to select td's(internally checking/unchecking checkboxes).
Second function(12-20) is to click and unclick on single td to check and uncheck a checkbox. I am able to do mousedown and select multiple td's but I am not able to a click and unclick on single td. I am not sure where the problem is ? Any suggestion is appreciated.
Here is the code:
$("#tbl td").mousedown(function() {
$("#tbl td").bind('mouseover', function() {
var checkbox = $(':checkbox', this)[0];
$(this).css({
'background': (checkbox.checked ? 'white' : '#6D7B8D')
});
checkbox.checked = !checkbox.checked;
});
$(this).mouseover();
}).mouseup(function(event) {
$("#td").unbind('mouseover');
event.preventDefault();
event.stopPropagation();
});
$('#tbl td').click(function(e) {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).find('input:checkbox').attr("checked", "");
$(this).css({
background: "white"
});
} else {
$(this).find('input:checkbox').attr("checked", "checked");
$(this).css({
background: "#6D7B8D"
});
}
});​
Thanks

Well, I am not sure if this is what you exactly need but maybe could help.
(Just to know, it will be really helpful if you put the HTML code!)
Live Demo: http://jsfiddle.net/oscarj24/TATg7/
Code:
$('#tbl').on('mousedown, mouseover, mouseup, click', 'td', function(e) {
if(e.type == 'mousedown'){
$(this).mouseover();
} else if(e.type == 'mouseover'){
var checkbox = $('input:checkbox');
$(this).css({'background': (checkbox.is(':checked') ? 'white' : '#6D7B8D')});
checkbox.prop('checked', !checkbox.checked);
} else if(e.type == 'mouseup'){
$(this).unbind('mouseover');
e.preventDefault();
e.stopPropagation();
} else if(e.type == 'click'){
var checked = $('input:checked').is(':checked');
checked ? background = 'white' : background = '#6D7B8D';
$('input:checked').prop('checked', !checked);
$(this).css({background: background});
}
});
​