I am new to jQuery and I am trying to learn it. I want to iterate over a 9 * 9 grid alerting the values of the input boxes(total 81), row wise, column wise and grid 3 * 3 wise.
Here is what I have tried:
$("#checkBox").change(function () {
if (this.checked) {
$('table tr').each(function () {
alert($(this).td.input.val());
});
$('table tr').each(function () {
alert($(this).td.input.val());
});
} else {
alert("Check Box is unchecked. AutoCheck is disabled.");
}
});
Only else alert is working. Any comment or guidance is appreciated.
This part $(this).td.input.val() of your code will raise error since jquery object does not contains a property called td.
Try,
//The following snippet would alert the text inside of each td
$('table tr td').each(function () {
alert($(this).text());
});
//The following snippet would alert the value of each input each td
$('table tr td input').each(function () {
alert($(this).val());
});
If you want to iterate row wise then try,
$('table tr').each(function () {
$(this).find('td').each(function(){
$(this).find(':input').each(function(){
alert($(this).val());
});
});
});
Related
Currently I'm working on filtering table using bootstrap-multiselect plugin. I'm having hard time to make it work properly. I want to show/hide table row depending on selected values in multiselect. E.g. If row has a value of Activated, then only row with activated value should be shown and others will be hidden. If I selected Activated and Deactivated then row with values Activated and Deactivated will be shown. If I selected All Selected, all row should shown. Checked my code here:
$('#custom-select').multiselect({
includeSelectAllOption: true,
onChange: function(option, checked) {
var selected = [];
$('#custom-select option:selected').each(function() {
selected.push($(this).val());
});
console.log(selected);
$.each(selected, function(i, val) {
$('#custom-table tr > td:not(:contains('+val+'))').closest('tr').hide();
$('#custom-table tr > td:contains('+val+')').closest('tr').show();
//console.log(val);
});
}
});
My current work on jsfiddle.
You are hiding table rows tr inside each loop. So, last time the loop runs, it hides the rows which it was supposed to show. Take that out of the loop and hide all the rows before performing show.
$(document).ready(function() {
$('#custom-select').multiselect({
includeSelectAllOption: true,
onChange: function(option, checked) {
var selected = [];
$('#custom-select option:selected').each(function() {
selected.push($(this).val());
});
$('#custom-table tr').hide(); // <-----
$.each(selected, function(i, val) {
$('#custom-table tr > td:contains('+val+')').closest('tr').show();
});
}
});
});
jsFiddle
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);
}
});
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 this function which is responsible of making the table tr and th collapse. I want to collapse the table columns when button is clicked. I think because I am using $('tr th'),click(function() so when I clicking wherever in th it is collapsing. I want to collapse when we click the button or image like this (function myFunction(){}).
Here is my code:
$(window).load(function(){
$(function() {
$('table tbody tr:odd').addClass('alt');
$('table tbody tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$('tr th:not(:eq(0),:eq(1),:eq(2),:eq(3),:eq(4),:eq(5))').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});
why dont you add a onclick event on button instead of adding a click listener using jquery.
you can do something like
<button type="button" onclick="toggleExpand('anyReqParam1', 'anyReqParam2')" class="toggle"></button>
and in script define the function
<script>
function toggleExpand(anyReqParam1, anyReqParam2) {
// toggle code goes here
}
</script>
or alternatively you can also do
$(".toggle").click(function() {
});
using JQuery. Here toggle is the class name that i gave to the button
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.