First off I'd like to say that I know that this question was already asked a lot of times but I can assure you that I tried using all the answers I could find but all failed.
So first off I have a jQuery Datatable looking like this (I'm using laravel so that's why there's this foreach) :
<table>
<thead>
<tr>
<th id="head-cbx"><input type="checkbox" name="example"></th>
<th id="head-xcode">XCODE</th>
<tr>
</thead>
<tbody>
#foreach($xcodes as $xcode)
<tr>
<td id="head-cbx"><input type="checkbox" class="xcode-cbx" name="xcodes[]"></td>
<td>{{ $xcode }}</td>
<tr>
#endforeach
</tbody>
</table>
The obvious objective is to have a checkbox that allows me to check / uncheck all the others.
For the jQuery part I tried the following solutions :
$(document).ready(function(){
var headcbx = $('#head-cbx');
headcbx.change(function(){
if (headcbx.is(':checked')) {
//uncheck all
} else {
//check all
}
});
}
then
$(document).ready(function(){
var headcbx = $('#head-cbx');
headcbx.change(function(){
if ($(this).is(':checked')) {
//uncheck all
} else {
//check all
}
});
}
then
$(document).ready(function(){
var headcbx = $('#head-cbx');
headcbx.change(function(){
if (this.is(':checked')) {
//uncheck all
} else {
//check all
}
});
}
then I changed my test from
if (this.is(':checked'))...
to
if(this.checked)
and then to
if(this.prop('checked)
of course, each time I tried the variants
this
headcbx
$(this)
$('#head-cbx')
After that I tried using
$(document).on('change', '#head-cbx', function(){...})
with all the same variants that I listed above.
Anyway, I always have the same result : false.
So I'm beginning to get frustrated and I could use the help because I think I'm missing something obvious somewhere but I can't seem to find it...
Thanks :)
Your selector is wrong, as head-cbx refers to <TD> element not checkbox So either change selector
var headcbx = $('#head-cbx :checkbox');
Note: this.checked/$(this).is(':checked')/$(this).prop('checked) would work
OR, Fix HTML
<th><input id="head-cbx" type="checkbox" name="example"></th>
The issue is here:
var headcbx = $('#head-cbx');
&
<td id="head-cbx">
the id you are ussing in event listener is of td, not of checkbox. So change it to something like:
var headcbx = $('#head-cbx :checkbox');
Related
I came across a problem whose solution has led me to post it here so others may make use of it or improvise better than me.
My Problem: I have a table of results with check boxes to select rows. The requirement was to know if I was selecting(using the checkboxes) the same set of one particular column value, if so I had to do something.
HTML code
Considering the below being my html code for the dynamic table(CFML). The tag has to be inside a loop to dynamically create the table content.
<table class="fixedTable">
<thead class="containerbg">
<tr class="listingheader">
<td>StagingID</td>
<td>BatchID</td>
<td>AuditID</td>
<td>Action</td>
<td>File Name</td>
<td>Card No</td>
<td>Card No</td>
</tr>
</thead>
<tbody>
<tr class="cur_row" >
<td>#staging_id#</td>
<td>#batch_import_job_id#</td>
<td>#audit_Id#</td>
<td>#code#</td>
<td class="file_name">#source_filename#</td>
<td>#card_number#</td>
<td class="tblResolve">
<input type="checkbox" class="checkBoxClass cb" name="resolveErrorsCheck" value="#row_no#">
</td>
</tr>
JS Code
//register the click event
$(document).ready(function() {
$(document).on('click', '.cb',enableDisableActions);
});
function enableDisableActions() {
var values = new Array();
$.each($("input[name='resolveErrorsCheck']:checked").closest('td').siblings('.file_name'),
function (){
values.push($(this).text());
});
const initial = values[0];
const result = values.filter(src => src != initial);
if(result.length){
//no duplicate file_name selected
//do something
}else{
//duplicate file_name selected
//do something
}
}
if i have a table with an infinite which has an input type checkbox. Each check box is marked with an id eg. #det1, #det2 , #det3 how would i write my JS loop to check if that certain checkbox is checked to perform the function on it, without writing out each id ,because this id is also incremented based on the product uploader so for each product uploaded it will just add 1 to the id,at the end i could sit with allot of id's.
javascript that works adding the id manually:
$('#details1, #details2').on('change', function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
});
So that works but because have so many id's based on my tr's i would just like to do a loop and check if that id exist (it could be id = #details999) and if it does do function on.change.
(for each product ill upload the id adds 1 to it eg. product1 = #details1 , product2 = #details2, etc...)
There might be a better way of implementing the idea but as im newbie i am open to any suggestions.
What i tried:
for (var i = 0; i < ?; i++) {
$('#details'+ i).on('change', function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
})
}
i know ? means nothing but i realized i cant set a limit to that also don't want a infinite loop so i'm kind of stuck.
Add a common class to the select elements and use that to target them
<input type="checkbox" id="details1" class="details-checkbox">
<input type="checkbox" id="details2" class="details-checkbox">
<input type="checkbox" id="details3" class="details-checkbox">
and then use
$('.details-checkbox').on('change', function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
});
I would use event delegation:
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
$('table').on('change', 'input[type="checkbox"]', function(e) {
var row = $(this).closest('tr').next('tr');
$(row).toggle($(this).prop('checked'));
})
tr.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>1</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 1</td></tr>
<tr><td>2</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 2</td></tr>
<tr><td>3</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 3</td></tr>
<tr><td>4</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 4</td></tr>
</tbody>
</table>
$('input:checkbox[id*=details ]').on('change',function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
});
Iam completely confused at a point and need anyone's help here. Went through various examples but nothing could help.
I have a created dynamic table, added with checkboxes. Now whenever a row is selected its id will be bound to an array and it will be diplayed at the top of table.
What I need is:The code for functionality of select all check box. And whenever all the rows are selected by select all checkbox, its ids has to be displayed.
Below is the code for the table:
<table>
<thead>
<tr>
<th>
<input name="all"
type="checkbox"
ng-click="selectAll()" />
</th>
<th>ID</th>
<th>Date</th>
</tr>
</thead>
<tbody ng-repeat="x in cons">
<tr>
<td>
<input type="checkbox"
name="selectedids[]"
value="{{x.id}}"
ng-checked="idSelection.indexOf(x.id) > -1"
ng-click="toggleSelection(x.id, idSelection)"> </td>
<td>{{x.id}}</td>
<td>{{x.title}}</td>
</tr>
</tbody>
app.js:
$scope.idSelection = [];
$scope.toggleSelection = function toggleSelection(selectionName, listSelection) {
var idx = listSelection.indexOf(selectionName);
// is currently selected
if (idx > -1) {
listSelection.splice(idx, 1);
}
// is newly selected
else {
listSelection.push(selectionName);
}
};
//$scope.selectAll=function(){}
//Need code for this function to work
Here is a demo: http://plnkr.co/edit/m9eQeXRMwzRdfCUi5YpX?p=preview.
Will be grateful, if anyone can guide.
You need a variable to keep track of whether 'All' is currently active or not. If not, we create a new array of all item id's using the array map function, and pass this to idSelection. If allSelected is currently active, we pass an empty array to idSelection
$scope.allSelected = false;
$scope.selectAll = function() {
$scope.allSelected = !$scope.allSelected;
if($scope.allSelected) {
$scope.idSelection = $scope.cons.map(function(item) {
return item.id;
});
} else {
$scope.idSelection = [];
}
}
I have dynamic table that has table cell with checkbox field. This fields are populated from DB so my table is dynamic. I would like to loop through checkboxes based on their class name. In that loop I want to check value for each check box. For example if value is equal 1 I want checkbox to be checked, if not unchecked. Alo I'm not sure if possible but I would like to set unique ID for each of these check boxes. Since my table is dynamic my fields need to have unique ID's. Here is example of my code:
<table>
<thead>
<tr>
<th>#</th>
<th>Time Slots</th>
<th>Block</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>~(SLOT_LABEL)</td>
<td>
<span>
<input type="checkbox" name="CF-[Events]" class="block" id="block_"+Value that will make this ID unique. value="~(SLOT_ID)"/>
</span>
</td>
</tr>
</tbody>
</table>
Also in current language that I work with to read values from DB I have to use NAME tag. If anyone can help please let me know. Thank you.
You can use the attribute selector to retrieve elements by both their name and value. Try this:
$('input[name="CF-[Events]"][value="1"]').prop("checked", true);
Working example
If you don't want a jQuery solution, it is also possible to fetch these elements with the querySelector:
var inputs = document.querySelectorAll("input.block");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
you can do it in jquery by each loop
$('.ClassName').each(function(i, o) {
// o is object in your case checkbox
// i is index
// your code
});
$("input[name='CF-[Events]']").each(function() {
if($(this).val() === "1")
{
$(this).prop("checked", true);
}
});
I´m new in JQuery and I have a trouble. I want to read a specific cell value from a table row where I have a checkbox. I have an event that handles the checkbox checked event. This is my code:
$("#businesses input:checkbox").change(function (
var $this = $(this);
if ($this.is(":checked")) {
//Here I want to read a value from a column in a row where is the checkbox
} else {
//Here I want to read a value from a column in a row where is the checkbox
}
});
I have a table called "businesses" and it has this format
<table id="businesses">
<tr>
<th>Select Value</th>
<th>Value</th>
</tr>
<tr>
<td><input type="checkbox" class="selectedService" title="Seleccionar" /></td>
<td>125</td>
</tr>
<tr>
<td><input type="checkbox" class="selectedService" title="Seleccionar" /></td>
<td>126</td>
</tr>
</table>
What I want to do, is that when I select a checkbox, get the value field of its row.
If I press the first checkbox I want to get 125.
Thanks!!!
Starting from your checkbox (this in the event handler function), you need to go up to the containing <td> element, across to the next <td> element, then get its text:
$('#businesses input:checkbox').change(function(e) {
if(this.checked) {
var value = parseInt($(this).closest('td').next('td').text(), 10);
// above will convert it from a string to an integer
}
else {
// same as above? Seems redundant
}
});
Use siblings() of the parent:
$this.closest('td').siblings().text();
If this is not the only other <td> siblings() would return all of the rest so use appropriate selector to filter them.
You could access it with:
$this.parent().next().text();
Try this...
$("#businesses input:checkbox").on ('change', function (e)
if ($(this).is(":checked")) {
$( e.target ).closest("td").text();
} else {
//Here I want to read a value from a column in a row where is the checkbox
}
});
Greetings.