Accessing Datatable not visbile Checkboxes - javascript

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)
);
}
}
});
});

Related

select all checkbox in header , to select all checkboxes in that column

I have used the code:
<script type="text/javascript">
$(window).load(function () {
$(document).delegate(".checkall", "click", function(event) {
$(this).closest("table").find(':checkbox').attr('checked', this.checked);
});
});
</script>
This code is working fine when I select/deselect the checkbox in header for the first time. But when I again select the checkbox then this code is not working. The checkboxes are not selected.
You should use .prop() instead of .attr(). And you have to check if an element is already checked.
...
var $checkbox = $(this).closest("table").find(':checkbox');
if ($checkbox.is(':checked')) $checkbox.prop('checked', false);
else $checkbox.prop('checked', true);
...

Deselecting datatables hidden checkbox

I think I have a simple problem here but my jquery is somewhat limited.
I'm using this script to check all the checkboxes in my table rows which are handled by datatables (including the hidden ones from deferred rendering)
It's working for the checking portion, but the unchecking is not working when I want to deselect the boxes. How can I tweak what I have to to uncheck the boxes correctly?
Heres my code:
$('#selectall').on('click', function() { //on click
if(this.checked) { // check select status
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked', $(this).is(':checked'));
} else {
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked', $(this).is(':not(:checked)'));
}
});
Thanks in advance
I'm partial to this version myself:
$('#selectall').on('click', function() { //on click
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked',this.checked);
});
Looks to me like your uncheck code evaluates to true.. which means it would be checking them. Try this instead:
$('#selectall').on('click', function() { //on click
if (this.checked) { // check select status
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked',true);
} else {
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked',false);
}
});

Checkboxes with parent and child selections

I have a row of checkboxes and I want the following:
- when clicking the parent select/unselect all child checkboxes
- when all checkboxes are checked (including the parent) and you uncheck one of the child checkboxes, the parent should also uncheck.
I have this code:
$(document).ready(function(){
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
});
And here it is in a fiddle: http://jsfiddle.net/2b2hw58d/1/
Why doesn't it work?
You need to use .prop() instead of .attr() also, use .closest() to find the closest ancestor element matching the selector.
jQuery(function ($) {
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(function () {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
});
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(function () {
var $fs = $(this).closest('fieldset');
$fs.find('.parentCheckBox').prop('checked', !$fs.find('.childCheckBox').is(':not(:checked)'))
});
});
Demo: Fiddle
In this parents('fieldset:eq(0)') part :eq(0) isn't needed and use prop instead attr.
JSFiddle
$(document).ready(function(){
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).closest('fieldset').find('.parentCheckBox').prop('checked') == true && this.checked == false)
$(this).closest('fieldset').find('.parentCheckBox').prop('checked', false);
if (this.checked == true) {
var flag = true;
$(this).closest('fieldset').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).closest('fieldset').find('.parentCheckBox').prop('checked', flag);
}
}
);
});
Use 'prop' instead of 'attr'.
Demo:
http://jsfiddle.net/m3o7u7Lm/1/

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);
});

Checkbox not working properly

Here is my piece of code in jquery actuall I want in such way where :
Where by default value of Ball will be shown in Textbox.
same time either All or Stopall will be work(it's not working here properly :( )
For multiple times checking All button,which is not working according to the expectation
here is the fiddle link : http://jsfiddle.net/bigzer0/PKRVR/11/
$(document).ready(function() {
$('.check').click(function(){
$("#policyName").val('Start');
$("#features").val('');
$('[name="startall"]').on('click', function() {
var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
if (this.checked) {
$checkboxes.prop({
checked: true,
disabled: true
});
}
else{
$checkboxes.prop({
checked: false
});
}
});
$(".check").each(function(){
if($(this).prop('checked')){
$("#policyName").val($("#policyName").val() + $(this).val());
$("#features").val($("#features").val() + $(this).data('name'));
}
});
});
});
Any comments on this context will be welcome
You're code is broken in many ways. You are binding a click event inside a click event. You should take that outside and just make sure it's inside the document.ready function since your element is a static element.
$(document).ready(function() {
// cache features
var $features = $('#features');
// cache policyname
var $policy = $("#policyName");
// cache all/stopall
var $ss = $('[name="startall"],[name="stopall"]');
// cache all others
var $checkboxes = $('input[type="checkbox"]').not($ss);
// function to update text boxes
function updateText() {
var policyName = 'Start';
var features = '';
// LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
$checkboxes.filter(':checked').each(function(i, v) {
policyName += $(v).val();
features += $(v).data('name');
});
// update textboxes
$policy.val(policyName);
$features.val(features);
}
$checkboxes.on('change', function() {
updateText();
// check startall if all three boxes are checked
$('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
});
$('input[name="startall"]').on('change', function() {
$checkboxes.prop({
'checked': this.checked,
'disabled': false
});
updateText();
});
$('input[name="stopall"]').on('change', function() {
$checkboxes.add('[name="startall"]').prop({
'checked': false,
'disabled': this.checked
});
updateText();
});
// updatetext on page load
updateText();
});​
FIDDLE
you are checking click function in click function. you should use if statement.

Categories

Resources