Clicking on select all of the checkbox only the particular page is selected .not selecting all pages. Here using jquery. Datatable contains 100s of pages and using that data graph plotting is performed. The data is dynamically loaded. Data in the data table is dynamically loaded.
$('#select-checkbox').on ('click', function (e) {
var rows = mytab.rows({'search': 'applied'}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
if (this.checked) {
var data = mytab.rows({'search': 'applied'}).data();
$('input[type="checkbox"]:checked',rows).map(function() {
var $row = $(this).closest('tr');
var rw=mytab.row($row).data();
var $td = $(this).closest('td');
var rd = mytab.cell($td).data();
mytab1.row.add(rw).draw();
Selected_Param_Link.push(rd);
});
} else {
mytab1.rows().remove().draw();
Selected_Param_Link = [];
}
});
// Handle click on checkbox to set state of "Select all" control
$('#hd1 tbody' || '#fv tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
var el = $('#select-checkbox').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
Try this
$(document).ready(function(){
function addOnHandler(elem){
elem.on ('click', function (e) {
let rows = mytab.rows({'search': 'applied'}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
if (this.checked) {
let data = mytab.rows({'search': 'applied'}).data();
$('input[type="checkbox"]:checked',rows).map(function() {
let $row = $(this).closest('tr');
let rw=mytab.row($row).data();
let $td = $(this).closest('td');
let rd = mytab.cell($td).data();
mytab1.row.add(rw).draw();
Selected_Param_Link.push(rd);
});
} else {
mytab1.rows().remove().draw();
Selected_Param_Link = [];
}
}//addOnHandler
// Handle click on checkbox to set state of "Select all" control
$('#hd1 tbody' || '#fv tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
let el = $('#select-checkbox').get(0);
addOnHandler(el);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
});
Related
I'm using this script:
$.fn.conditionize = function(options){
var settings = $.extend({
hideJS: true
}, options );
$.fn.showOrHide = function(listenTo, listenFor, $section) {
if ($(listenTo).is('select, input[type=text]') && $(listenTo).val() == listenFor ) {
$section.slideDown();
}
else if ($(listenTo + ":checked").val() == listenFor) {
$section.slideDown();
}
else {
$section.slideUp();
}
}
return this.each( function() {
var listenTo = "[name=" + $(this).data('cond-option') + "]";
var listenFor = $(this).data('cond-value');
var $section = $(this);
//Set up event listener
$(listenTo).on('change', function() {
$.fn.showOrHide(listenTo, listenFor, $section);
});
//If setting was chosen, hide everything first...
if (settings.hideJS) {
$(this).hide();
}
//Show based on current value on page load
$.fn.showOrHide(listenTo, listenFor, $section);
});
}
$('.conditional').conditionize();
$('.showhide').click(function() {
$('#target').toggle('slow');
});
To show/hide form fields. How do I add the required attribute to this initially hidden set of fields, after they are revealed? IOW, these fields only display if the answer to a previous question is "yes", but I don't want these fields to be required if they answer "no."
I have a table on my page, and a filtering text box above it that works fantastic, using the following JQuery:
$("#searchInputCompanies").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#cBody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function(i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.text().toLowerCase().indexOf(data[d].toLowerCase()) > -1) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
$('#selectAllCompanies').prop('checked', '');
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
How can I set up a Reset Filter button for this?
Uhh, this is quite a bad implementation :(
First, you need to change the event for $("#searchInputCompanies") to make it all a bit easier. So, it will become $("#searchInputCompanies").on("input", function() {...
$("#resetAction").on("whatEventYouWant", function() {
$("#searchInputCompanies").val("").trigger("input");
});
This will trigger input event on $("#searchInputCompanies") and because the text box is empty all rows will become visible.
I have following functionality for "select all checkboxes" and "depending checkboxes", but it is not working as I want.
1. if I select "select all" the "controlled" checkboxes will stay disabled
2. when enable "controlled" checkbox using "controller" and than use "select all" the "controlled" chackboxes stay active. I need them to be inactive when they are not selected.
I tried to create if statement (commented) to solve this, but it is not working as expected. Is there some other solution or it will be maybe better to reset checkboxes after unselect "select all" checkbox? In case of reseting I need to reset only group of checkboxes, not the whole form.
$('form').ready(function() {
var $check1 = $('input[id*=selectAll]'),
$check2 = $('tr th :checkbox'),
$checkAll = $check1.add($check2);
$checkAll.on('click keydown', function () {
var checkedStatus = this.checked,
$selected1 = $(this).closest(".formFieldWrapper").find('input:checkbox:not(:first):not([data-leader])'),
$selected2 = $(this).closest("table").find('tr td :checkbox'),
$selectedAll = $selected1.add($selected2);
$selectedAll.each(function () {
// if($checkAll.prop('checked', true)) {
$(this).prop('checked', checkedStatus) //.prop('disabled', false)
// } else {
// $(this).prop('checked', checkedStatus);
// $checkAll.prop('checked', false);
// $('.controlled').prop('disabled', true)
// }
});
$selectedAll.on('click keydown', function(){
$checkAll.prop('checked', false)
});
});
});
$('.controlled').prop('disabled', true);
$('.controller').click(function () {
var $this = $(this),
$inputs = $($this.data('target'));
$inputs.prop('disabled', !this.checked);
if (!this.checked) {
$inputs.prop('checked', false);
}
});
JSFiddle
Solution:
var $check1 = $('input[id*=selectAll]'),
$check2 = $('tr th :checkbox'),
$checkAll = $check1.add($check2);
$checkAll.on('click keydown', function () {
var checkedStatus = this.checked,
$selected1 = $(this).closest(".formFieldWrapper").find('input:checkbox:not(:first):not([data-leader])'),
$selected2 = $(this).closest("table").find('tr td :checkbox'),
$selectedAll = $selected1.add($selected2);
$selectedAll.each(function () {
$(this).prop('checked', checkedStatus);
if (checkedStatus === true) {
$('.controlled').prop('disabled', false);
} else {
$('.controlled').prop('disabled', true);
}
});
$selectedAll.on('click keydown', function () {
$checkAll.prop('checked', false)
});
});
$('.controlled').prop('disabled', true);
$('.controller').click(function () {
var $this = $(this),
$inputs = $($this.data('target'));
$inputs.prop('disabled', !this.checked);
if (!this.checked) {
$inputs.prop('checked', false);
}
});
Hii I have an HTML Page which displays the category and their respecting sub categories with a checkbox beside every category. My list looks somewhat like this :-
Folder1
--Folder2
--Folder5
--Folder8
Folder3
--Folder4
--Folder9
What i need is to check all the sub categories when the parent category is clicked.
(i.e Folder2,Folder5,Folder8 should get selected when the checkbox beside Folder1 is checked)
a bit of a vague question so here are a couple of examples
Based on a class, check the parent if any child is selected, check ALL children if a parent is checked.
var checkboxHandlerObj = {
init: function () {
$('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
$('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked)
},
parentClicked: function () {
var parentCheck = this.checked;
$('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').each(function () {
this.checked = parentCheck
});
},
childClicked: function () {
var temp = $(this).attr('class').split('-');
var parentId = temp[1];
$('#' + parentId)[0].checked = $('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]:checked').length !== 0;
}
}
checkboxHandlerObj.init();
a fiddle for that:http://jsfiddle.net/gfDAh/
and here is a parent dependance model where if ANY child is unchecked, it unchecks the parent, and it has a "check all children" box
$('#jobTypesMaster').click(function() {
var iam = this.checked;
$('.billdetail').each(function() {
this.checked = iam;
});
if (!iam) {
$('.billfinal:checkbox')[0].checked = iam;
};
$('.billfinal').attr('disabled', !this.checked);
if (!iam) {
$('.billspaid:checkbox')[0].checked = this.checked;
};
$('.billspaid').attr('disabled', $('.billfinal').checked);
});
$('.billdetail').click(function() {
if ($('.billdetail:checked').length < $('.billdetail:checkbox').length) {
$('.billfinal:checkbox')[0].checked = false;
$('.billspaid:checkbox')[0].checked = false;
$('.billfinal').attr('disabled', true);
$('.billspaid').attr('disabled', true);
$('#jobTypesMaster')[0].checked = false;
}
else {
$('.billfinal').attr('disabled', false);
};
});
$('.billfinal').click(function() {
$('.billspaid:checkbox').attr('disabled', !this.checked);
if (!this.checked) {
$('.billspaid')[0].checked = false;
};
});
$('.billdetail').trigger('click'); //set value based on initial checked count
Fiddle for that: http://jsfiddle.net/h682v/3/
The problem is actually how to find the checkboxes that belong to a such subcategory.
Give the subcategory checkboxes the same name (eg subcat_folder1).
For the category checkbox, plase a javascript function on the onClick handle.
When the user clicked on the folder1 checkbox, find all elements with the name subcat_folder1 (getElementsByName('subcat_folder1'))and do your thing.
Here are 4 functions I use to improve the usability of a table by:
If cell contains a checkbox and you click outside of a checkbox
The the tr contains data-url then the whole row is "clickable"
with CSS hover effect and redirects on click.
If the last column in the table contains a relative/absolute URL
then also redirects on click.
Check all checkboxes.
Here's my code:
// Click table cell auto check checkbox
$('table tr td').has("input[type=checkbox]").click(function(event) {
// Onl call this if click outside of the checkbox itself
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
// Table row click
$('table tr[data-url]').each(function(){
var url = $(this).attr("data-url");
if(url.length){
$(this)
.addClass("clickable")
.find("td").click(function(){
window.location = url;
return false;
});
}
});
// Double click row, open edit link
$('table:not(.noDoubleClick) tr td').dblclick(function(e) {
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
// Check all checkboxes
$('table input[type=checkbox][name^="checkall"]').live("click",function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
Q: how can I modify this into one function so that jquery only has to search for tables once?
Example jsfiddle
Thanks for every bodies suggestions I have ended up taking a slightly different approach:
$('table').each(function(){
var $table= $(this), $cell, $row;
// TABLE ROWS
$table.find('tr').each(function(){
$row = $(this);
// Row click redirect to data-url
var url = $row.attr("data-url");
if(url && url.length){
$row.addClass("clickable").find("td").click(function(){
window.location = url;
return false;
});
}
// TABLE HEADING CELLS
$row.find('th, thead td').each(function(){
$cell = $(this);
// Check all checkboxes
$cell.find('input.checkall').live("click",function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
});
// TABLE CELLS
$row.find('td').each(function(){
$cell = $(this);
// Check checbox onClick
if($cell.find("input[type=checkbox]")){
$cell.click(function(e) {
if(e.target.type !== 'checkbox') $(':checkbox', this).trigger('click');
});
}
// Double click open edit link
if(!$table.hasClass("noDoubleClick")){
$cell.dblclick(function(e){
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(linkElHref && (!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0)){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
}
}); // end CELLS
}); // end ROWS
}); // end TABLE
You should use .on , .live is being deprecated:
$(document).on('click', 'table tr td', function(event)
{
if( $(this).has("input[type=checkbox]"))
{
if (event.target.type !== 'checkbox')
$(':checkbox', this).trigger('click');
}
});
// Table row click
$(document).on('click', 'table tr[data-url] td', function(e)
{
var url = $(this).parent().attr("data-url");
if(url.length)
{
window.location = url;
return false;
}
});
$(document).on('dblclick', 'table:not(.noDoubleClick) tr td', function(e) {
debugger;
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
// Check all checkboxes
$(document).on('click', 'table input.checkall', function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
I have made the basic stubs here, i dont want to rewrite all your code.
$(document).ready(function(){
$('table').each(function(){
var table = $(this);
table.find('tr').each(function (){
var tr = $(this);
tr.find('td').each(function(){
var td = $(this);
td.has("input[type=checkbox]").click(function(event) {
// Only call this if click outside of the checkbox itself
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
});
});
});
The logic is: Find all tables, loop through all the tr's and then the td's. I've did your first function and hope that explains how it could be used?
The best thing to do in this case is to:
Get all of the tables in the page
Loop through each table
Find and apply logic to the individual elements as needed
$('table').each(function(){
var table = $(this),
rows = table.find('tr[data-url]'),
cells = table.find('td'),
all = table.find('input[type=checkbox][name^="checkall"]'),
edit = table.is('.noDoubleClick');
cells.each(function(){
//Apply your logic here
if(edit === true){
//Apply your logic to this cell here
}
});
rows.each(function(){
//Apply your logic to this row here
});
all.on('click',function(){
//Apply your logic here
});
});