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);
});
Related
In my code the selection of all items is possible
I am using a java script to check all and it properly works.But when check one of them from this table, I can't do it.One value is inserted.How it possible to select separately.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function () {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.name').attr('checked', this.checked);
});
// if all checkbox are selected, then check the select all checkbox
// and viceversa
$(".name").click(function () {
if ($(".name").length == $(".name:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
`
try below:
$(function () {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.name').prop('checked', this.checked);
if (this.checked)
insertText();
});
// if all checkbox are selected, then check the select all checkbox
// and viceversa
$(".name").click(function () {
if ($(".name").length == $(".name:checked").length) {
$("#selectall").prop("checked", "checked");
} else {
$("#selectall").prop("checked", false);
}
insertText();
});
function insertText()
{
var arr = [];
$('.name:checked').each(function() {
arr.push($(this).val());
})
$('.text').val($arr.join(','));
}
});
Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell and change the color of that cell which I have done.
Now the problem is that when I tick the checkbox and then untick it, that cell is not getting that cell color back, as in the when the checkbox is unticked its cell color should be back to white. Can anyone help me? Help would be highly appreciated.
Here is my fiddle http://jsfiddle.net/UcDMW/50/
$(function () {
$('table tr td').on('click', function (e) {
if (e.target.type == "checkbox") {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
$(this).css('background-color', 'white');
} else {
$(this).attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
return;
} else {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).css('background-color', 'white');
$(this).find('input:checkbox').attr('checked', false);
} else {
$(this).find('input:checkbox').attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
}
});
});
You can simply accomplish your task by the following snippet,
Try,
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')){ return; }
var checked = $(this).find(':checkbox')[0].checked;
$(this).find(':checkbox')[0].checked = !checked;
});
Cached version
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')) return;
var checkBox = $(this).find(':checkbox')[0];
checkBox.checked = !checkBox.checked;
});
DEMO
You could restructure like this
$('table tr td').on('click', function(e){
var checkbox = $(this).find('input:checkbox');
if (!$(e.target).is(':checkbox')) {
checkbox.prop('checked', !checkbox.is(':checked'));
}
$(this).css('background-color', checkbox.is(':checked')?'#DFF0D8':'white');
});
DEMO
You can change your js to this:
working demo
EDIT: now working also when clicking on td cells.
$(function(){
bindCells();
});
function bindCells() {
$('table tr td').on('click', function (e) {
var check = (e.target.type=="checkbox") ? e.target : $(this).find("input:checkbox").get(0);
$(check).attr('checked', !check.getAttribute('checked'));
$(this).css('background-color', (check.checked) ? '#DFF0D8' : "#FFFFFF");
});
}
alert($(this).is(':checked')); Use it and check the value. It returns false when you check or uncheck the box. This because you use isChecked on table elements(table,tr,td)
Change
if ($(this).is(':checked')) {
in line 4 to
if ($(e.target).is(':checked')) {
I have 2 select box where I'm trying to avoid duplicated values (options) in those select box's.
they all start with the same options list but after selecting option in selectA this option wont bee seen in selectB and vice versa.
It should work if you select on selectA-selectB-selectA... etc.
Every time one of the select box should be with n-1 options.
I did the next this.. it works but in mobile device the .hide() it's not working!
$('#selectA').bind('change', function () {
$("#selectB option").show();
$("#selectB option[value='" + $(this + 'option:selected').attr('value') + "']").hide();
});
$('#selectB').bind('change', function () {
$("#selectA option").show();
alert($(this).find('option:selected').attr('value'));
$("#selectA option[value='" + $(this).find('option:selected').attr('value') + "']").hide();
});
}
Tried with class : .hide()
.hide {display: none;}
$('#selectA').bind('change', function () {
$("#selectB option").removeClass('hide');
$("#selectB option[value='" + $(this + 'option:selected').attr('value') + "']").addClass('hide');
});
$('#selectB').bind('change', function () {
$("#selectA option").removeClass('hide');
$("#selectA option[value='" + $(this).find('option:selected').attr('value') + "']").addClass('hide');
});
}
also dont work.
tried this:
$('#selectA').on('change', function() {
$('option:not(:selected)', this).clone().appendTo($('#selectB').empty());
});
$('#selectB').on('change', function() {
$('option:not(:selected)', this).clone().appendTo($('#selectA').empty());
});
but the problem here is if we start with 5 options for example then after selecting option in selectA I'll get n-1 in selectB,after selecting option in
selectB I'll get n-2 in selectA and so on... in the end you get empty list.
any ideas how to fix it?
Try this: fiddle
$(document).ready(function() {
$('#selectA').on('change', function() { UpdateDropdown($(this), $('#selectB')); })
$('#selectB').on('change', function() { UpdateDropdown($(this), $('#selectA')); })
function UpdateDropdown($source, $target) {
var $sourceitems = $('option:not(:selected)', $source).clone();
var sourcevalues = $.map($sourceitems, function(option) { return option.value; });
var $targetitem = $target.find(':selected');
if ($.inArray($targetitem.val(), sourcevalues) == -1) {
$sourceitems = $.merge($sourceitems, $targetitem);
}
$sourceitems.appendTo($target.empty());
}
});
If keeping sort order is important fiddle with sort
I have an HTML table with a checkbox in each row.
I want to loop over the table and see if there are any checkboxes that are checked.
The following does not work:
$("#save").click( function() {
$('#mytable tr').each(function (i, row) {
var $actualrow = $(row);
checkbox = $actualrow.find('input:checked');
console.log($checkbox);
});
This prints in the console the following:
[prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "input:checked", constructor: function, init: function…]
per row regardless of whether any checkbox is checked.
Update
Same issue with:
$('#mytable tr').each(function (i, row) {
var $actualrow = $(row);
$checkbox = $actualrow.find(':checkbox:checked');
console.log($checkbox);
});
Use this instead:
$('#save').click(function () {
$('#mytable').find('input[type="checkbox"]:checked') //...
});
Let me explain you what the selector does:
input[type="checkbox"] means that this will match each <input /> with type attribute type equals to checkbox
After that: :checked will match all checked checkboxes.
You can loop over these checkboxes with:
$('#save').click(function () {
$('#mytable').find('input[type="checkbox"]:checked').each(function () {
//this is the current checkbox
});
});
Here is demo in JSFiddle.
And here is a demo which solves exactly your problem http://jsfiddle.net/DuE8K/1/.
$('#save').click(function () {
$('#mytable').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked') &&
row.find('textarea').val().length <= 0) {
alert('You must fill the text area!');
}
});
});
use .filter(':has(:checkbox:checked)' ie:
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
$('#out').append(this.id);
});
The following code snippet enables/disables a button depending on whether at least one checkbox on the page has been checked.
$('input[type=checkbox]').change(function () {
$('#test > tbody tr').each(function () {
if ($('input[type=checkbox]').is(':checked')) {
$('#btnexcellSelect').removeAttr('disabled');
} else {
$('#btnexcellSelect').attr('disabled', 'disabled');
}
if ($(this).is(':checked')){
console.log( $(this).attr('id'));
}else{
console.log($(this).attr('id'));
}
});
});
Here is demo in JSFiddle.
I have 2 multi select boxes like as in this link. http://jsfiddle.net/bdMAF/38/
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
But When i add from one first select box to second select box it is working fine for
me.But again when i add from second select box to first select box they are appending to
last of first select box.But what i want is i need to add they must be added in the place
where they deleted.
Thanks in advance...
Maybe you can simply set and remove the attribute "disabled" but it will leave a blank space in the options. Note that with this method you will need to clone the option the first time.
The other solution whould be to add the content as usual but applying a sort() function before
function byValue(a, b) {
return a.value > b.value ? 1 : -1;
};
function rearrangeList(list) {
$(list).find("option").sort(byValue).appendTo(list);
}
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
rearrangeList("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
rearrangeList("#list1");
});
});
});
You can try at this fiddle
You need to keep track of some sort of index, I think in your case you can use the value of each option. (but you could use a dedicated data-* attribute if you need to)
With that value you can then search the current list and see where it should fit in. Loop the options and check for a value greater than the one you are moving. If you find one then insert it before that, if you don't fine one then insert at the end.
This should do it:
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
var item = $(this).remove();
var match = null;
$("#list1").find("option").each(function(){
if($(this).attr("value") > item.attr("value")){
match = $(this);
return false;
}
});
if(match)
item.insertBefore(match);
else
$("#list1").append(item);
});
});
You can apply the same for the reverse too.
Here is a working example
After adding the options back to #list1, a simple sort() will do the rest. For that we need to add a comparison function to it based on its value.
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
var opts = $('#list1 option').get();
$('#list1 ').html(opts.sort(optionSort));
});
});
function optionSort(a, b) {
return $(a).val() > $(b).val();
}
});
Check out this JSFiddle
You can also sort using text() instead of val() by changing it in the optionSort().