Develop Reference

delete button visible while checkbox is checked

I have table with 3 columns. The third columns is a check box for each row.
<tr id='sub".$this->getHtmlId()."_".$cpt."' class='mui-row'>
<td class='mui-col-md-6'>".$row[0]."</td>
<td class='mui-col-md-2'>".$row[1]."</td>
<td class='mui-col-md-2' style='border:none'>
<component id='box' class=\ "CheckBoxComponent\" name=\ "chk".$row[3]. "\" />
</td>
</tr>";
what i want is that when I check a checkbox the delete button become visible and if i check a second or more it stay visible because I can delete multiple rows at the same time.
Right now, everything I have tried do that when I check a row the button appear I click a second one it disappear and when I click a third one it appear again
here some example that I tried :
$('#deleteButton').toggle('slow', function() {
// Animation complete.
});
var chkbox = $(\".check\");
button = $(\"#box\");
button.attr(\"disabled\",\"disabled\");
chkbox.change(function() {
if (this.checked) {
button.removeAttr(\"disabled\");
}
else {
button.attr(\"disabled\",\"disabled\");
}
});

You can get the count of checked checkbox by $(".check:checked").length
If there is a checked checkbox, show the button.
$(function() {
//hide on init
$("#deleteButton").hide();
$(".check").click(function() {
//get the number of checked
if ($(".check:checked").length) $("#deleteButton").show();
else $("#deleteButton").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='mui-row'>
<td class='mui-col-md-6'>1</td>
<td class='mui-col-md-2'>1</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>2</td>
<td class='mui-col-md-2'>2</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>3</td>
<td class='mui-col-md-2'>3</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
</table>
<button id="deleteButton" type="button">Delete!</button>

Unable to disable/enable the check boxes on first select (click) in jQuery

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>

Jquery check the checkbox in td before

I have a table in html with td contains a checkbox input like this
<table id="my_table">
<tr>
<td><input type="checkbox" name="td1"></td>
<td><input type="checkbox" name="td2"></td>
</tr>
<tr>
<td><input type="checkbox" name="td3"></td>
<td><input type="checkbox" name="td4"></td>
</tr>
</table>
<script>
$('[type=checkbox]').change(function () {
if($(this).is(":checked")) {
$(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
}
});
</script>
I wanna create a function in jquery that when I check a checkbox the one above it is checked (example if td3 is checked then td1 is checked also) but the one i used check the input next to this and not above it.
Thanks for your help

One approach, though using plain JavaScript rather than jQuery, is to assign an event-listener, for the change event, to the parent <td> element. From there find its cellIndex property to find the correct cell, and descendant <input>, in the previous row, to change:
// retrieve the <table> element, by its id property:
var table = document.getElementById('my_table'),
// find all the <td> elements within the <table>:
cells = table.getElementsByTagName('td'),
// convert the collection of <td> elements
// into an Array (using an ES5 approach because
// of my work browser):
cellArray = Array.prototype.slice.call(cells, 0);
// if ES6 is available to you the following would
// be more concise:
// cellArray = Array.from( cells );
// iterating over the Array of cells:
cellArray.forEach(function(cell) {
// 'cell', the first argument, is a reference to
// the current array-element (a <td> node)
// of the Array over which we're iterating.
// here we add the event-listener for the 'change'
// event, using the anonymous method to handle the
// functionality:
cell.addEventListener('change', function(e) {
// 'this' is the <td> element, the 'cell' variable:
var index = this.cellIndex,
// e is the event-object passed into the
// anonymous function,
// e.target is the element that triggered
// the event we were listening for, the
// descendant <input>; the checked property
// is Boolean, and will return true if it's
// checked and false if not:
checked = e.target.checked,
// the parentNode of a <td> is the <tr>:
row = this.parentNode,
// the previous <tr> element is the
// previousElementSibling (the first
// of the element's previous-siblings
// that is also an element, so excluding
// textNodes, commentNodes etc:
previousRow = row.previousElementSibling;
// if we have a previous row:
if (previousRow) {
// we find its children (which are elements,
// children is different from childNodes):
previousRow.children[index]
// we then find the first, if any, <input>
// element with a 'type' property of 'checkbox':
.querySelector('input[type=checkbox]')
// and set its checked state to the same
// Boolean value as the <input> which fired the
// the change event:
.checked = checked;
}
});
});
var table = document.getElementById('my_table'),
cells = table.getElementsByTagName('td'),
cellArray = Array.prototype.slice.call(cells, 0);
cellArray.forEach(function(cell) {
cell.addEventListener('change', function(e) {
var index = this.cellIndex,
checked = e.target.checked,
row = this.parentNode,
previousRow = row.previousElementSibling;
if (previousRow) {
previousRow.children[index].querySelector('input[type=checkbox]').checked = checked;
}
});
});
<table id="my_table">
<tr>
<td>
<input type="checkbox" name="td1">
</td>
<td>
<input type="checkbox" name="td2">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="td3">
</td>
<td>
<input type="checkbox" name="td4">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="td5">
</td>
<td>
<input type="checkbox" name="td6">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="td7">
</td>
<td>
<input type="checkbox" name="td8">
</td>
</tr>
</table>
JS Fiddle demo.
References:
Array.from().
Array.prototype.forEach().
Array.prototype.slice().
document.getElementById().
document.querySelector().
document.querySelectorAll().
HTMLTableCellElement properties, including cellIndex.
EventTarget.addEventListener().
Node.childNodes.
Node.parentNode.
NonDocumentTypeChildNode.previousElementSibling.
ParentNode.children.

Use index() to get index of clicked checkbox td and accordingly check another previous checkbox
$('[type=checkbox]').change(function () {
index = $(this).closest('td').index();
if($(this).is(":checked")) {
$(this).closest('tr').prev().find('input:checkbox').eq(index).prop('checked', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="my_table">
<tr>
<td><input type="checkbox" name="td1"></td>
<td><input type="checkbox" name="td2"></td>
</tr>
<tr>
<td><input type="checkbox" name="td3"></td>
<td><input type="checkbox" name="td4"></td>
</tr>
</table>

Check the following example. It uses index() to get the clicked cell's index. Then selects the previous row and finds the respective checkbox:
$('[type=checkbox]').change(function () {
var that = $(this);
// Get clicked cell's index
var index = that.closest('td').index();
// Get previous row's cell with same index
var aboveTd = that.closest('tr').prev('tr').find('td').eq(index).find('input[type=checkbox]');
// Toggle checked state
aboveTd.prop('checked', that.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
<tr>
<td><input type="checkbox" name="td1"></td>
<td><input type="checkbox" name="td2"></td>
</tr>
<tr>
<td><input type="checkbox" name="td3"></td>
<td><input type="checkbox" name="td4"></td>
</tr>
</table>

You can do something like this:
$('[type=checkbox]').change(function() {
if ($(this).closest('tr').prev().has('input[type="checkbox"]')) {
var idx = $(this).closest('td').index();
$(this).closest('tr').prev().find('td:eq(' + idx + ') input[type=checkbox]').prop('checked', this.checked);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
<tr>
<td>
<input type="checkbox" name="td1">
</td>
<td>
<input type="checkbox" name="td2">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="td3">
</td>
<td>
<input type="checkbox" name="td4">
</td>
</tr>
</table>

How do I check multiple checkboxes with jquery without giving each an id?

I am trying to check multiple checkboxes using one with jQuery. I know how to do this to check all checkboxes or to check multiple if they have ids. I want to be able to do this without that though.
All of my checkboxes are in a similar grouping. I have them grouped in a consistant way.
I have my work on a fiddle here.
Here is my code
window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
var $row = $(this);
if ($row.children('td:first').find('input:checkbox').prop('checked')) {
$(this).find('td.imageBox').each(function (index) {
var $imageBox = $(this);
if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
++(totals[index]);
}
});
}
});
$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});
}
My problem is with the onCheckForm function.
Thank you.

Note: I started writing this answer for a duplicate of this question and realized I couldn't post this, so I posted it here instead. The table structure is different and a lot simplified in this answer.
Lets start off with a very simple table with a checkbox column:
<table>
<thead>
<tr>
<th scope='col' id='toggler'>
<input type='checkbox' id='toggleAll'>
<label for='toggleAll'>Select all</label>
</th>
<th scope='col'>A column</th>
</tr>
</thead>
<tbody>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
</tbody>
</table>
Here, I have a checkbox in the header along with a label for accessibility purposes (you may hide the label if you wish).
I've also given the header cell an ID and used the headers attribute for the td elements. This isn't absolutely necessary for what we're doing, however it seems like an appropriate case to use the headers attribute. If you ever want to move the checkbox to another column for certain rows, you can just add the headers attribute to that cell.
Here is some JavaScript code:
$('#toggleAll').change(function () {
$('td[headers~="toggler"] > input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
We are binding a function to the change event to the checkbox in the header.
The selector will look for all checkboxes that are children of td elements that contain the ID toggler in a space-separated list of tokens in the headers attribute.
The .prop() method sets the checked property of the checkboxes to match the value of the checked property of the one in the header ("this").
Our basic functionality is done here.
We can make improvements though, by changing the state of the checkbox at the top to match the state of the checkboxes in the rows.
The state of the header checkbox should be:
Unchecked if 0 are checked
Interdetermine if (0, n) are checked
Checked if n are checked
Where n indicates all the checkboxes.
To do this, we bind a function to the change event of each of the boxes in the table rows:
$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
var allChecked = true, noneChecked = true;
var headerCheckbox = $('#toggleAll');
$('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
if(domElement.checked) {
// at least one is checked
noneChecked = false;
} else {
// at least one is unchecked
allChecked = false;
}
});
if(allChecked) {
headerCheckbox.prop('checked', true);
headerCheckbox.prop('indeterminate', false);
} else if (noneChecked) {
headerCheckbox.prop('checked', false);
headerCheckbox.prop('indeterminate', false);
} else {
headerCheckbox.prop('indeterminate', true);
}
});
I'm using .each() here to loop through all of the appropriate checkboxes to determine whether all, none, or some are checked.
See the jsFiddle demo.
Hope this helps, I sure learned quite a bit while answering the question!

See this fiddle for a cleaner way:
http://jsfiddle.net/W75dy/19/
<td class="field">
<form class="fieldCheck">
<input type="checkbox" id="Row1Chk" name="Row1" value="Row1" />
</form> Programs
</td>
$('#Row1Chk').on('change', function(event) {
$('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

Javascript error, updating checkboxes/buttons base don result of other checkboxes

first a quick description:
I have 4 tables (1 and 3 contain a line of checkboxes, 2 and 4 contain radio buttons).
What I am looking to do is have it so that when I select a checkbox in table 1, it updates tables 2,3,4 by setting the equivalent checkbox to 'disabled'.
I figure the easiest option is to use the 'VALUE' attribute, as this will be the same on each table (e.g. the field with VALUE 4 on the first table will be the equivalent of the field with VALUE 4 on the others).
My tables all have a unique ID per table, and share a classname of 'TableClassName'.
They all look similar to:
<table id="TableID1" class="TableClassName">
<tr>
<th class="CellGrey">1</td>
<th class="CellGrey ">2</td>
<th class="CellGrey ">3</td>
<th class="CellGrey ">4</td>
</tr>
<tr>
<td class="CellRed "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="1" checked></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="2"></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="3"></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="4"></td>
</tr>
</table>
So far what I have is:
script type="text/javascript">
$(document).ready(function()
{
$("#TableID1").on('click','input:checkbox',function()
{
if ($(this).attr('checked'))
{
var $val = $(this).attr('value');
//alert($val);
$(".DBSelectTable td").function()
{
if ($(this).child().attr('VALUE') == $val)
{
$(this).child().attr('disabled');
}
}
}
}
)
}
);
</script>
But, I am getting the error:
"Uncaught Type Error: Object[object Object] has no method 'function' "
my theory is simple:
Select the #TableID1 table
find out which box in the first table has been clicked and get the VALUE attribute
Select the .TableClassName tables
check if any have the same VALUE, and add the 'disabled' attribute
but something is wrong, and I can't see where to go from here. Any help would be appreciated.

note that I use prop instead if attr.
also, you can compare the values in the find function.
$(document).ready(function()
{
$("#TableID1").on('change','input:checkbox',function()
{
if ($(this).prop('checked'))
{
var val = $(this).val();
$(".DBSelectTable td").find("[value='"+ val +"']").prop('disabled',true)
}
}
)
}
);