I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.
just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function
Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>
Related
On the view of my ASP.NET MVC 5 Application, I have two tables, Each row in the tables has a checkbox which is dynamically generated.
I am trying to add Check All / Uncheck All functionality for both the tables.
Following are two checkboxes:
<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select / Unselect All</b>
<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select / Unselect All</b>
Following is the relevant HTML Code:
<table class="table" id="hostsTable">
<thead>
<tr>
<th>FQ</th>
<th>Name</th>
<th>Select?</th>
</tr>
</thead>
<tr>
<td>
VISIBLE FQ VALUE
</td>
<td>
VISIBLE NAME
</td>
<td>
<input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" />
</td>
</tr>
</table>
The Structure of both the table is same and ID of second one is countersTable
Following is my jQuery:
$('.CheckAll').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#hostsTable tr input:checkbox:not(".CheckAll")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAll').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAll').prop('checked', true);
}
});
$('.CheckAllt2').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#countersTable tr input:checkbox:not(".CheckAllt2")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', true);
}
});
When I click on either of the Select / Unselect All checkbox, the checkboxes from both the tables get Checked / Unchecked.
How Can I restrict this to respective tables?
Thanks In Advance
I assume that you select the wrong element when calling $.parent().parent(). If you grab an element that both tables are children of, all input[type="checkbox"] will be selected, obviously.
Since you have different classes for both checkboxes, try to instead of selecting by $.parent().parent(), just using the # id selector for the relevant table.
I.e. change this:
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
to
$("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked);
for the first table, and with #counterTable for the second one.
My issue is if you select any of the check box (payee) - another rows with same column checkboxes should be be disable/enabled.
Issue #1: I am unable to disable/enable the check boxes on first select. But working on second click if you select any checkbox.
Issue #2: If I load the page again the value with check box which is previously checked is showing as disable with checked. I need it disable with unchecked.
Below is my code:
function onPayeeChkChange() {
jQuery(document).ready(function() {
$('#tblHousehold tr td#tdpayee input:checkbox').click(function(){
var $inputs = $('#tblHousehold tr td#tdpayee input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
});
});
}
I am not sure what I have missed.
Is this what you are looking for?
Note: if you disable a checkbox, you will not be able to re-use it afterwards. If you must disable it, just add .prop('disabled', true) within the loop.
$(function () {
$(':checkbox').click(function () {
var input = $(this), td = input.closest('td'), table = td.closest('table');
// get index of the cell relative to its parent row
var i = td.index();
// loop through each row
$('tr', table).each(function () {
// uncheck the row's ith cell's checkbox
$('td:eq(' + i + ') :checkbox', this).not(input).prop('checked', false);
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox">
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
I'm a little stuck, can't get my head around this problem. I have setup some jQuery that identifies the values in radio inputs, which align with values within the table. This is the start to doing some filtering on a table.
I want the following three things to happen:
Whenever you click on a filter and the cell has the same value, it's row gets highlighted
Whenever you check that option off, it gets removed
If the page loads and an option is already checked, the row gets highlighted on load
jQuery Code:
$(function () {
// On Change of Radio Buttons
$('input').on('change', function () {
var filter = $('input:checkbox[name=filter]:checked').val();
// Edit the Rows
$(".gameStatus").filter(function () {
return $(this).text() == filter;
}).parent('tr').addClass('filtered');
});
});
jsfiddle:
http://jsfiddle.net/darcyvoutt/8xgd51mg/
$(function () {
var filters = [];
var edit_rows = function () {
filters = [];
$('input:checkbox[name=filter]:checked').each(function () {
filters.push(this.value);
});
// Edit the Rows
$(".gameStatus").each(function () {
$(this).parent('tr')
.toggleClass('filtered',
filters.indexOf($(this).text()) > -1
);
});
}
edit_rows();
// On Change of Radio Buttons
$('input').on('change', edit_rows);
});
jsfiddle
edit: added functionality so it gets invoked on page load
Here's alternate solution ...
$(function () {
function highlight() {
var filter = $(this).val();
var checked = this.checked;
// Edit the Rows
var affectedRows = $(".gameStatus").filter(function () {
return $(this).text() == filter;
});
if (checked) {
affectedRows.parent('tr').addClass('filtered');
} else {
affectedRows.parent('tr').removeClass('filtered');
}
}
$('input').each(highlight);
// On Change of Radio Buttons
$('input').on('change', highlight);
});
.filtered {
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="filters">
<input type="checkbox" name="filter" id="draft" value="Draft" checked />
<label for="draft">Draft</label>
<input type="checkbox" name="filter" id="active" value="Active" />
<label for="active">Active</label>
<input type="checkbox" name="filter" id="complete" value="Complete" />
<label for="complete">Complete</label>
<input type="checkbox" name="filter" id="acrhived" value="Archived" />
<label for="acrhived">Archived</label>
</div>
<table id="userManager">
<tbody>
<tr>
<th>Game</th>
<th>Teams</th>
<th>Status</th>
</tr>
<tr>
<td>Another Game</td>
<td>New Team, Project Lucrum</td>
<td class="gameStatus">Active</td>
</tr>
<tr>
<td>New Game</td>
<td>No teams selected</td>
<td class="gameStatus">Draft</td>
</tr>
<tr>
<td>New Game</td>
<td>New Team, Just in Case</td>
<td class="gameStatus">Active</td>
</tr>
</tbody>
</table>
<div class="test"></div>
</div>
try this. :)
$(function () {
var highlight = function(el){
if(el.is(':checked')){
$(".gameStatus:contains("+el.val()+")")
.parent('tr').addClass('filtered');
}else{
$(".gameStatus:contains("+el.val()+")")
.parent('tr').removeClass('filtered');
}
}
//On Load
highlight($('input[type="checkbox"][name=filter]:checked'));
// On Change of Radio Buttons
$('input').on('change', function () {
highlight($(this));
});
});
I am trying to delete the rows of my html table inside a form whose checkboxes are checked.
Here is my HTML:
<table>
<tr class="row">
<td><input type="text"></td>
<td><input type="checkbox" value="Delete" name="foo"/></td>
</tr>
<tr class="row">
<td><input type="text"></td>
<td><input type="checkbox" value="Delete" name="foo"/></td>
</tr>
</table>
<input type="button" id="btnDelete" value="Remove Selected"/>
Here is my jquery script:
$(function () {
$('#btnDelete').on('click', function () {
;
$('input[name=foo]').each(function (i, obj) {
if (obj.checked) {
alert("clicked!!" + i + " " + jQuery.type(obj));
obj.parents().eq(1).empty();
}
});
});
});
Now on clicking the btnDelete, the script is invoked as alert shows up.But the grandFather element(i.e. <tr>) is not getting emptied with child getting deleted. Hence the pathogenic line seems to be:
obj.parents().eq(1).empty();
So how should I remove the table row(i.e.<tr>) along with its all child nodes whose checkbox is checked?
You can try .has() function like
$('tr').has('input[name=foo]:checked').remove();
Your code will be reduced to
$(function () {
$('#btnDelete').on('click', function () {
$('tr').has('input[name=foo]:checked').remove();
});
});
Try $(obj).closest('tr').empty(); (Thanks nnnnnn)
Why not keep it simple and try this: http://jsfiddle.net/H9WL7/
$(function () {
$('#btnDelete').on('click', function () {
$('input[name=foo]').each(function () {
if ($(this).is(":checked")) {
$(this).closest('tr').empty();
}
});
});
});
The obj variable is a reference to the DOM element, it's not a jQuery object. Try this:
$(obj).parents().eq(1).empty();
...to get your existing code working. Or, better:
$(obj).closest('tr').remove();
Note that .empty() doesn't remove the tr element itself, it just removes all of its content, so I suggest .remove().
Demo: http://jsfiddle.net/TWL2E/
I have been using bootstrap tables to fetch data from database using kendo datasource. So in order to make it more interactive i have used a checkbox for simultaneous actions.
I want to delete all the entries with one checkbox. I have read about deleting entries with single checkbox using jQuery. But problem is that I have only one checkbox in table and all the entries are being fetched using kendo data source.
If i am creating confusion then see here-
<script id="template" type="text/x-kendo-template">
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" ></input>
</td></tr>
</script>
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" />
</th>
</tr>
</table>
Now with using kendo datasource i have one column of checkboxes only.
So i am doing this-
<script type="text/javascript">
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
</script>
And still no result. Help!
Try to wrap your jQuery code inside $(document).ready(function(){}); or $(function(){}); to let it see the whole DOM:
$(document).ready(function() {
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
});
Also, your HTML are wrapped inside the script tag, move it outside and remove redundant ' as well as the input tag doesn't need a closing </input> tag:
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" />
</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('.done').click(function (event) {
if ($(this).attr('checked')) {
$('input:checkbox:not(".done")').each(function () {
$(this).attr('checked', 'checked');
});
}
});
});
</script>
Try this. it may works
Try this:
$(function () {
$('.done').on('click', function(){
// i comment this condition if you want selectall for checked or unchecked
//if ($(this).is(':checked')){
$(':checkbox').prop('checked', this.checked);
//}
});
});
Just try this:
Script
$(document).ready(function(){
$('.done').click(function (event) {
$('.chkbxq').each(function () {
$(this).attr('checked', flag);
});
});
});
HTML:
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" class="chkbxq" />
</th>
</tr>
</table>