We Keep Coding

How to pass request Id value to modal?

When I click on 'edit' button modal is open
but in a hidden field no I can't receive RequestId.
Please help me how to pass dynamic requested to modal form?
This I will use in Codeigniter framework.
If it is possible to please rewrite the code I will be most helpful.
<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
<a data-toggle="modal" href="<?php base_url()?>#myModal" class="btn btn-warning btn-sm">Edit</a>
</td>
</tr>
<?php $sn++;}?>
</tbody>
</table>

If I am right, you wanted to display a modal after clicks on the edit button.
Edit
I hope $row['rid'] is your unique ID and here is a html modal code
<div class="modal" id="detail_modal_pop" style="overflow: scroll;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close close_c_modal" >×</button>
<h4 class="modal-title c_modal">Details</h4>
</div>
<div class="modal-body">
<h6 id="load_wait" class="text-center">Please wait...</h6>
<div id="detail_modal_pop_result" style="display:none;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_c_modal" >Close</button>
</div>
</div>
</div>
</div>
To display a modal on clicks on edit button, use below script
<script>
function get_modal_details(rid)
{
$('#detail_modal_pop').fadeIn(200);
$("#detail_modal_pop_result").hide();
$("#load_wait").show();
jQuery.ajax({
url: "<?php echo base_url() ?>some_controller/controller_method",
data: { rid: rid },
type: "POST",
success:function(data){
$("#load_wait").hide();
$("#detail_modal_pop_result").show();
$("#detail_modal_pop_result").html(data);
},
error:function (){}
});
}
$(".close_c_modal").on("click", function()
{
$('#detail_modal_pop').fadeOut(200);
$("#detail_modal_pop_result").hide(300);
$('#detail_modal_pop_result').html('');
$("#load_wait").show(300);
});
</script>
And here is the PHP code
<?php
//"Some_controller.php" Controller
public function controller_method()
{
if(isset($_POST['rid']))
{
$rid = (int)$_POST['rid'];
// $get_info = $this->Model->get_info($rid);
// Write modal content here...
}
}
?>
Hope this will help you.

You could add
data-request-id="<?php echo $row['rid']?>"
to the buttons that open the modals, and than use jquery/javascript to fetch the data with ajax
var requestId = $('.modalBtn').attr("data-request-id");

The is a sample to pass the ID to modal by using HTML data-attributes & jQuery.
<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
Edit
</td>
</tr>
<?php
$sn++;
}?>
</tbody>
</table>
<script>
$('#myModal').on('show.bs.modal', function (e) {
var $btn = e.relatedTarget,
rId = $btn.data('id');
// "rId" would be the value from the html data-attribute.
console.log(rId);
});
</script>

<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
<a onclick="load_item('<?php echo $row['rid'];?>');" class="btn btn-warning btn-sm">Edit</a>
</td>
</tr>
<?php $sn++;}?>
</tbody>
</table>
Javascript Code You had to insert
function load_item(rid){
/**
Write your ajax/javascript code here
*/
$("#myModal").modal("show");
}

Remove data-toggle="modal" from <a> tag and make onclick edit based on ID
<td>
<a id="edit-form" href="#" class="btn btn-warning btn-sm">Edit</a>
</td>
JS
$('#edit-form').click(function() {
$('#hidden_field_id').val(your-value);
$('#myModal').modal('show');
});

using check box to delete multiple records using php and ajax

i am trying to delete some records form my database as along it obey the rule that make it to appear in the table, so am trying to make use of php and ajax to complete this action. Though i copied the code online to perform the action.
But this is what i notice, anytime i select the records that i want to delete, it will just fade out the selected row but on refresh of the page the record will re-appear which meant am missing something which i don't know, here is the code\
index.php
<?php
//include auth.php file on all secure pages
require("../db.php");
session_start();
if(!isset($_SESSION["username"])){
header("Location: login");
exit(); }
?>
<?php require_once('header.php')?>
<?php
//index.php
$query = "SELECT * FROM consignment WHERE shipmentstatus='Pending'";
$result = mysqli_query($con, $query);
?>
<div class="container content">
<?php
if(mysqli_num_rows($result) > 0)
{
?>
<div class="table-responsive">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>Consignment No</th>
<th>Origin</th>
<th>Destination</th>
<th>Pickup Date</th>
<th>Status</th>
<th >Action</th>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tbody>
<tr id="<?php echo $row["consignmentno"]; ?>" >
<td><?php echo $row["consignmentno"]; ?></td>
<td><?php echo $row["shipmentorigin"]; ?></td>
<td><?php echo $row["shipmentdestination"]; ?></td>
<td><?php echo $row["shipmentpickupdate"]; ?></td>
<td><?php echo $row["shipmentstatus"]; ?></td>
<td><input type="checkbox" name="customer_id[]" class="delete_customer" value="<?php echo $row["consignmentno"]; ?>" /></td>
</tr>
</tbody>
<?php
}
?>
</table>
</div>
<?php
}
?>
<div align="center">
<button type="button" name="btn_delete" id="btn_delete" class="btn btn-success">Delete</button>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#btn_delete').click(function(){
if(confirm("Are you sure you want to delete this?"))
{
var id = [];
$(':checkbox:checked').each(function(i){
id[i] = $(this).val();
});
if(id.length === 0) //tell you if the array is empty
{
alert("Please Select atleast one checkbox");
}
else
{
$.ajax({
url:'deleterecord.php',
method:'POST',
data:{id:id},
success:function()
{
for(var i=0; i<id.length; i++)
{
$('tr#'+id[i]+'').css('background-color', '#ccc');
$('tr#'+id[i]+'').fadeOut('slow');
}
}
});
}
}
else
{
return false;
}
});
});
</script>
<?php require_once('footer.php')?>
And here is the delete page processor
deleterecord.php
<?php
require("../db.php");
session_start();
if(!isset($_SESSION["username"])){
header("Location: login");
exit(); }
?>
<?php
if(isset($_POST["id"]))
{
foreach($_POST["id"] as $id)
{
$query = "DELETE FROM consignment WHERE consignmentno = '".$id."'";
mysqli_query($con, $query);
}
}
?>

May be there is some problem in id.
Try to use this in script
$.each($(':checkbox:checked'),function(){
id.push($(this).val());
});

****HERE is tested full code****
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<div class="container content">
<table id="myTable" class="table table-striped" border="1">
<thead>
<tr>
<th>Consignment No</th>
<th>Origin</th>
<th>Destination</th>
<th>Pickup Date</th>
<th>Status</th>
<th >Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" name='consignment_no[]' value="1" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" name='consignment_no[]' value="2" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" name='consignment_no[]' value="3" /></td>
</tr>
</tbody>
<tr>
<td colspan="6" align="center"><button type="button" name="btn_delete" id="btn_delete" class="btn btn-danger">Delete Records</button></td>
</tr>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$('#btn_delete').click(function () {
if (confirm("Are you sure you want to delete this?"))
{
var id = [];
$(':checkbox:checked').each(function (i) {
id[i] = $(this).val();
});
if (id.length === 0) //tell you if the array is empty
{
alert("Please Select atleast one checkbox");
} else
{
$.ajax({
url: 'deleterecord.php',
method: 'POST',
data: {id: id},
success: function ()
{
for (var i = 0; i < id.length; i++)
{
// $('tr#' + id[i] + '').css('background-color', '#ccc');
// $('tr#' + id[i] + '').fadeOut('slow');
$('tr').filter(':has(:checkbox:checked)').find('td').each(function () {
$(this).css('background-color', '#ccc');
$(this).fadeOut('slow');
// this = td element
});
}
}
});
}
} else
{
return false;
}
});
});
</script>
</html>

How to sum multiple textbox data looping in php

I want to achieve what is shown in this picture:
I have successfully retrieved data from a table and I want to calculate the values from textboxes. How can I achieve that?
My current source code:
<!doctype html>
<html>
<head>
<title>Lookup Modal Bootstrap 3</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../datatables/dataTables.bootstrap.css"/>
<script src="../js/jquery-ui 1.12.1.js"></script>
<script src="../js/bootstrap.js" ></script>
</head>
<body>
<div class="container"><br/><br/><br/>
<div class="panel panel-success">
<div class="panel-heading" >
<h3 class="panel-title"><strong> Purchase Order</strong> <strong> Back </strong></h3>
</div>
<div class="panel-body">
<form action="poSimpan.php" name="aku" id="aku">
<table align="left" class="table table-bordered table-hover ">
<tr valign="baseline">
<td nowrap align="right"><strong>No. PO:</strong></td>
<td><input type="text" id="poNo" name="poNo" size="32"></td>
<td><strong>No. PR:</strong></td>
<td><input type="text" name="prNo" id="prNo" placeholder="Request Number" readonly /> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong>Supplier:</strong></td>
<td><select name="supplier" id="supplier" onChange="changeValue(this.value)" >
<option value=0>-Choose-</option>
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
$result = mysqli_query($con,'select * from supplier ');
$result = mysql_query("select * from supplier");
$jsArray = "var kode = new Array();\n";
while ($row = mysqli_fetch_array($result)) {
echo '<option value="' . $row['supplierName'] . '">' . $row['supplierName'] . '</option>';
}
?>
</select></td>
<td><strong>Branch :</strong></td>
<td><input type="text" id="Branch" name="Branch" size="20"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong> P.O Date</strong></td>
<td><input type="text" name="date_po" id="date_po" size="20"></td>
<td><strong>Delivery Date:</strong></td>
<td><input type="text" id="date_delivery" name="date_delivery" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong></strong></td>
<td></td>
<td><strong>Note:</strong></td>
<td><input type="text" id="note" name="note" size="32"></td>
</tr>
</table>
<div class="row">
<div class="col-md-5">
</div>
</div>
<h4><strong>Product Detail </strong></h4>
<table class="table table-bordered table-hover table-striped" >
<thead>
<tr>
<th scope="row"> </th>
<th scope="row"><strong>Product Code</strong></th>
<th scope="row"><strong>Product Name</strong></th>
<th scope="row"><strong>QTY</strong></th>
<th scope="row"><strong>Price</strong></th>
<th scope="row"><strong>Discount</strong></th>
<th scope="row"><strong>Total</strong></th>
</tr>
</thead>
<tbody id="product_table">
</tbody>
</table>
<table width="400" border="0" align="right">
<tr>
<th scope="row">Tax 10%</th>
<td>:</td>
<td><input name="tax" id="taxt" type="text"></td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>:</td>
<td><input name="grandtotal" id="grandtotal" type="text"></td>
</tr>
</table>
<input type="submit" value="Save" name="product_submit" id="product_submit" class="btn btn-primary" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lookup </h4>
</div>
<div class="modal-body">
<table id="lookup" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>No. PR</th>
<th>branch</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
$sql = mysqli_query($con,'select * from pr ');
while ($r = mysqli_fetch_array($sql)) {
?>
<tr class="pick" no="<?php echo $r['prNo']; ?>", branch="<?php echo $r['branch'] ?>">
<td><?php echo $r['prNo']; ?></td>
<td><?php echo $r['branch']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../datatables/jquery.dataTables.js"></script>
<script src="../datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
$(document).on('click', '.pick', function (e) {
document.getElementById("prNo").value = $(this).attr('no');
document.getElementById("branch").value = $(this).attr('branch');
var no=$(this).attr('no');
$.ajax({
type:"post",
data:"&product_id=1&prno="+no,
url:"POtabel.php",
success:function(result)
{
$("#product_table").html(result);
}
});
$('#myModal').modal('hide');
});
$(function () {
$("#lookup").dataTable();
});
</script>
</body>
</html>
and this is the target file
POtable.php
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo '<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12"></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35"></td>
<td><label for="qty"></label>
<input type="text" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="8"></td>
<td><input type="text" name="price'.$i.'" id="price'.$i.'" size="10"></td>
<td><input type="text" name="disc'.$i.'" id="disc'.$i.'" size="10"></td>
<td><input type="text" name="total'.$i.'" id="total'.$i.'" size="10"></td>
</tr>';
$i++;
}
}
?>
<script type="text/javascript">
function calculate(id){
var quantity = document.getElementById('qty'+id).value;
var price = document.getElementById('price'+id).value;
var sum = parseInt(quantity,10)*parseInt(price,10);
document.getElementById('total'+id).value = sum;
}
</script>

when the button is clicked i want the multiple selected checkbox row to be displayed from popup page to parent page

i have a table when the table row is selected.i want that particular row to be appended in another table.
<table class="myTable" border="1">
<tr class="table">
<th class="table">
ID
</th>
<th class="table">
Name
</th>
<th class="table">
Price
</th>
</tr>
<tr class="table">
<td class="table">
1
</td>
<td class="table">
A
</td>
<td class="table">
1500
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
<tr class="table">
<td class="table">
2
</td>
<td class="table">
B
</td>
<td class="table">
3455
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
</table>
<table id="printTable" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</table>
i have a popup page where i have a table with multiple checkbox.When the user select any of the checkbox and clicked on button that particular row has to be saved from popup page to parent page
<script>
$("table tr").click(function() {
var items=[];
var tablerow = $(this).closest("tr").clone();
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$(tablerow).children("td:last").html(tableData);
items.push(tablerow);
alert(items);
tablerow.appendTo($("#printTable"));
});
</script>

There is no need to map all the data, you can just clone the tr and append it to the other table. Like so:
<script>
$("table tr").click(function () {
// If you don't use a tbody, remove 'tbody' here
$("#printTable tbody").append($(this).clone());
});
</script>

EDIT: Used loop instead repeating
Probably not the best answer, but this can insert the value into the second table regardless to the column sorting.
https://jsfiddle.net/o4copkrz/2/
$("#input tr").click(function(){
var $this = $(this)
var arrIndex = ["id", "name", "price"]
var arrData = []
for (var i = 0; i < arrIndex.length; i++) {
arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
}
var $clone = $("#output thead tr").clone()
for (var i = 0; i < arrIndex.length; i++) {
$clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
arrIndex[i]
};
$clone.appendTo($("#output tbody"))
})

<h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>
<script>
$(".selectCheck").click(function() {
if($(this).prop("checked") == true){
$("#clonedData").append($(this).parent().parent().clone());
$("#clonedData").find(".removeIt").remove();
}else{
var rowCheck = $(this).parent().parent().clone();
rowCheck.children(".removeIt").remove();
$('#clonedData tr').each(function(){
if(rowCheck.html()==$(this).html()){
$(this).remove();
}
});
}
});
$("#appendToTable").click(function() {
$("#printTable").append($("#clonedData").children().clone());
$("#clonedData").html('');
});
I have also created a fiddle https://jsfiddle.net/kgbet3et/11/ for the same. Please check if it adresses your issue.

$('#myModal').modal('toggle');
$(document).on('change', 'input[type="checkbox"]', function(e){
if($(this).is(":checked"))
{
var row = $(this).closest('tr').html();
$('.table2 tbody').append('<tr>'+row+'</tr>');
}
else
{
$('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();
}
$('#row').on('click', ':checkbox', function (event) {
$(this).closest('tr').remove();
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="col-md-6">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<table class="table1 table table-bordered" id="echo">
<h3 style="text-align: center;"></h3>
<tr>
<td>1</td>
<td name="echo">A</td>
<td>1500</td>
<td><input type="checkbox" value="1" class="check-box"></td>
</tr>
<tr>
<td id="2">2</td>
<td name="fetal_echo">B</td>
<td>2000</td>
<td><input type="checkbox" value="2" class="check-box"></td>
</tr>
<tr>
<td id="1">3</td>
<td value="abc">C</td>
<td>8500</td>
<td><input type="checkbox" value="3" class="check-box"></td>
</tr>
<p id="output"></p>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button>
</div>
</div>
</div>
</div>
<table class="table2 table table-bordered" id="row">
<tbody>
</tbody>
</table>
<div>
#vijay mishra and #Vishnu Bhadoriya thankyou for your support....You are really awesome.

Jquery Filter table rows by multiple checkboxes

I am trying to get a filter working for a table. What I would like is checkboxes to filter (hide) rows based on whether they're checked or not and if the value is present in the table cell. I have it somewhat working, but it will only sort one of the checkboxes. Also, if there are multiple values in the table cell being filtered, that row is hidden. Thoughts? Thank you in advance for any help. I'm really struggling with this for some reason!
Here is the code I have been using:
$("input:checkbox").click(function () {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});
The markup is as follows (please excuse some messiness, its Wordpress)
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3><br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
<br/><br/><h3>Duration:</h3>
<input type="checkbox" rel="duration" value="Summer">Summer
<input type="checkbox" rel="duration" value="Semester">Semester
<input type="checkbox" rel="duration" value="Full Year or More">Full Year or More
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Field</th>
<th>Duration</th>
<th>Year of Study</th>
<th>Other</th>
<th>Procedure</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<?php
$grargs = array ( 'post_type' => 'scholarship');
$grant_query = new WP_Query( $grargs );
while ( $grant_query -> have_posts() ):
$grant_query -> the_post(); ?>
<tr class="grant-detail">
<td>
<?php the_title(); ?>
</td>
<td><?php echo wp_trim_words(get_the_content(), 25 ); ?></td>
<td class="fields" rel="<?php echo get_field('fields'); ?>"><?php echo the_field('fields'); ?></td>
<td class="duration" rel="<?php echo the_field('desired_duration'); ?>"><?php echo the_field('desired_duration'); ?></td>
<td class="status" rel="<?php echo the_field('year-of-study'); ?>"><?php echo the_field('year-of-study'); ?></td>
<td class="other" rel="<?php echo the_field('other'); ?>"><?php echo the_field('other'); ?></td>
<td class="procedure" rel="<?php echo the_field('procedure'); ?>"><?php echo the_field('procedure'); ?></td>
<td class="url"><?php echo get_field('url'); ?></td>
</tr>
<?php endwhile;
wp_reset_postdata(); //reset the first query
?>
</tbody>
</table>

As I think you just are calling the first checkbox [0]
if ($(this)[0].checked) {
call all by inserting someting like
$('input[type=checkbox]').each(function () {
if (this.checked) {
console.log($(this).val());
}
});

Your code works fine, here is a simplified version
$("input:checkbox").click(function() {
var showAll = true;
$('tr').not('.first').hide();
$('input:checkbox:checked').each(function() {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
});
if (showAll) {
$('tr').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3>
<br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Fields</th>
<th>Status</th>
<th>Procedure</th>
</tr>
</thead>
<tbody>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Freshman">Freshman</td>
<td class="status" rel="Freshman">Freshman</td>
<td class="procedure" rel="Freshman">Freshman</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Sophmore">Sopho</td>
<td class="status" rel="Sophmore">Sopho</td>
<td class="procedure" rel="Sophmore">Sopho</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Junior">Junior</td>
<td class="status" rel="Junior">Junior</td>
<td class="procedure" rel="Junior">Junior</td>
</tr>
</tbody>
</table>