Loop throught multiple array in table and combining in single array - javascript

Im working on project which there is a table where containing multiple result of title , number , money and checkbox . which i need to determine if the checkbox are non-checked and it won't take the result to combine in single array. How do we do this ? Kindly advice
i want combining for example :
into single array like :
总和大,1.9995,1;总和小,1.9995,1;虎,1.9995,1;
html :
<tbody id="confirm-table-body">
<tr>
<td> 总和大</td>
<td style="color: red">1.9995</td>
<td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td> 总和小</td>
<td style="color: red">1.9995</td>
<td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td> 虎</td>
<td style="color: red">1.9995</td>
<td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td colspan="2">组数: <span id="confirm-gropup-nums">3</span></td>
<td colspan="2">总金额: <span id="confirm-total-amount">3</span></td>
</tr>
</tbody>
JS :
"确定": function(){
var count = parseFloat($('#confirm-total-amount').html());
if(!isNaN(count) && count == 0){
alert("Please enter money!");
}else{
Combine single array here !!!!
}
},


Try this,
function getCheckedRows() {
var arr = [];
$('table :checkbox:checked').each(function() {
td = $(this).closest('tr').find('td');
arr.push([$(td[0]).text(), $(td[1]).text(), $(td[2]).find('input').val()].join());
});
$('#confirm-total-amount').text($('table :checkbox:checked').length)
return arr.join(';');
}
$('table :checkbox').on('change', function() {
console.log(getCheckedRows());
});
console.log(getCheckedRows());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="confirm-table-body">
<tr>
<td> 总和大</td>
<td style="color: red">1.9995</td>
<td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td> 总和小</td>
<td style="color: red">1.9995</td>
<td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td> 虎</td>
<td style="color: red">1.9995</td>
<td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td colspan="2">组数: <span id="confirm-gropup-nums">3</span></td>
<td colspan="2">总金额: <span id="confirm-total-amount">3</span></td>
</tr>
</tbody>
</table>


This can be done using jquery. I have added some classes of td for ease of use.
html:
<tbody id="confirm-table-body">
<tr>
<td class="title"> 总和大</td>
<td class="number" style="color: red">1.9995</td>
<td class="money" style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td class="title"> 总和小</td>
<td class="number" style="color: red">1.9995</td>
<td class="money" style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td class="title"> 虎</td>
<td class="number" style="color: red">1.9995</td>
<td class="money" style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td colspan="2">组数: <span id="confirm-gropup-nums">3</span></td>
<td colspan="2">总金额: <span id="confirm-total-amount">3</span></td>
</tr>
</tbody>
JS:
function(){
var count = parseFloat($('#confirm-total-amount').html()),
output = [];
if (!isNaN(count) && count == 0) {
alert("Please enter money!");
} else {
$("td input[type=checkbox]:checked").each(function() {
var $parent = $(this).parent();
output.push({
"title": $parent.find(".title").html(),
"number": $parent.find(".number").html(),
"money": $parent.find(".money input").val(),
})
})
}
}

Related

Get values of all the input in a table

I am stuck with this problem. I wanted to get all the values of all the input of the table but I am having a having a hard time getting all values. The number of rows in the table are dynamic.
<table id="receiptTable" class="table table-bordered">
<thead>
<th class="hidden">
<label>Order Item ID</label>
</th>
<th class="col-md-3">
<label>Item</label>
</th>
<th class="col-md-2">
<label>UOM</label>
</th>
<th class="col-md-2">
<label>Qty</label>
</th>
</thead>
<tbody>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="qwe123">
</td>
<td class="col-md-3">
<p>
Product 1
</p>
</td>
<td class="col-md-2" hidden>
<p>
UNIT
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="0" required>
</td>
</tr>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="abc123">
</td>
<td class="col-md-3">
<p>
Product 2
</p>
</td>
<td class="col-md-2" hidden>
<p>
PCS
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="3" required>
</td>
</tr>
</tbody>
I need to get the values of '.orderItemIDValue' and '.qtyFulfilled' and store them in a object array.

Iterate trs inside the table using map
var inputVals = $("#receiptTable tbody tr").map( (i,v) => ({
orderItemId : $(v).find(".orderItemID .orderItemIDValue").val(),
qty: $(v).find(".orderItemID .qtyFulfill").val()
})//end of inner function
).toArray(); //end of map

I'd select all the table's rows, loop them and return an object holding the className as key and its value
let values = [...document.getElementById('receiptTable').getElementsByTagName('tr')].map(row => {
let orderItemIdValue = row.getElementsByClassName('orderItemIDValue')[0].value;
let qtyFulfill = row.getElementsByClassName('qtyFulfill')[0].value;
return {
orderItemIdValue,
qtyFulfill
};
});

you could use jQuery like this:
<script>
jQuery(document).ready(function($)
{
var inputValues = [];
$('input').each(function(i, v)
{
inputValues.push($(this).val())
})
})
</script>
this loops through all the inputs and adds the value to an array called inputValues

Use qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get() It will return all the relevant fiels.
$("button").click(function() {
var orderItemIDValue = [];
var qtyFulfill = [];
orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
console.log(orderItemIDValue)
console.log(qtyFulfill)
})
Demo
$("button").click(function() {
var orderItemIDValue = [];
var qtyFulfill = [];
orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
console.log(orderItemIDValue)
console.log(qtyFulfill)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="receiptTable" class="table table-bordered">
<thead>
<th class="hidden">
<label>Order Item ID</label>
</th>
<th class="col-md-3">
<label>Item</label>
</th>
<th class="col-md-2">
<label>UOM</label>
</th>
<th class="col-md-2">
<label>Qty</label>
</th>
</thead>
<tbody>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="something">
</td>
<td class="col-md-3">
<p>
</p>
</td>
<td class="col-md-2" hidden>
<p>
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="0" required>
</td>
</tr> <tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="123">
</td>
<td class="col-md-3">
<p>
</p>
</td>
<td class="col-md-2" hidden>
<p>
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="3" required>
</td>
</tr>
</tbody>
</table>
<button>getdata</button>

You can try this Js code:
function getInputValues(){
var orderItemIDValueInputs = document.querySelectorAll('.orderItemIDValue');
var qtyFulfilledInputs = document.querySelectorAll('.qtyFulfilled');
var store = [];
orderItemIDValueInputs.forEach(function(input){
var value = input.value;
store.push(value);
});
qtyFulfilledInputs.forEach(function(input){
var value = input.value;
store.push(value);
});
return store;
}

Checkout This Demo.
$(document).ready(function(){
$('.tableExample tr').not(':first').each(function() {
var val = $(this).find(".orderItemIDValue").val();
alert(val);
});
})
.tableExample {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.tableExample thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.tableExample tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableExample">
<thead>
<tr>
<th>Name</th>
<th>Input</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
<p>Test 1</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="1">
</td>
</tr>
<tr>
<td class="col-md-3">
<p>Test 2</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="2">
</td>
</tr>
<tr>
<td class="col-md-3">
<p>Test 3</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="3">
</td>
</tr>
</tbody>
</table>

Keep style of <tr> while dragging

I have a table where I use JqueryUI and when I make a drag of a row the style of this disappear, that's normal cause when you make a drag of the row, this pass to be outside of table.
The element created while dragging is a <tr>and have the class .placeholder-style I want to keep the padding of the fields in the row created while drag.
How can I do this?
$("#tabs").tabs();
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if (cantidad_actual > cantidad_real) {
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for (var i = 0; i <= cantidad_a_ocultar; i++) {
$(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table');
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function(event, ui) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url: '/admin/projects/updateOrder',
data: {
ids: newOrder
}
})
.done(function(msg) {
location.reload();
});
}
}).disableSelection();
img {
width: 100px;
}
.hidden-td {
display: none !important;
}
.table {
background-color: green;
border: 0;
}
.trdrag {
background-color: yellow;
}
.thcenter {
background-color: grey !important;
}
.ui-sortable-helper {
left: 0px!important;
}
.idrow {
width: 5%;
}
.tdvisible {
width: 5%;
}
.tdslug {
width: 10%;
}
.tdimg {
width: 15%;
}
.tdorder {
width: 20%;
}
.tdacciones {
width: 40%;
}
#media (max-width: 500px) {
.ocultarid {
display: none;
}
.tdslug {
width: 15%;
}
}
#media (max-width: 350px) {
.ocultarvisible {
display: none;
}
.accionesvisible {
display: none;
}
.ordenvisible {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter ocultarid">ID</th>
<th class="thcenter ocultarvisible">Visible</th>
<th class="thcenter slug">Nombre</th>
<th class="thcenter header">Header</th>
<th class="thcenter home">Home</th>
<th class="thcenter ordenvisible">Orden</th>
<th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">2</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">3</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">4</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">5</p>
</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 2</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>
https://jsfiddle.net/3g3bt80e/9/

Try defineing the td / tr tags the css to a certain height & width this may resolve ur problem.

Placing Check Boxes Next To Each Other

I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

HTML to Excel data import via JavaScript

<div id="printing">
<div id='state'>
<table id="dataTable" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed; font:Arial, Helvetica, sans-serif">
<thead>
<tr align="center" style="font-size:20px;">
<td colspan="11"><u>Ministry of Health & Family Welfare</u></td>
</tr>
<tr align="center" style="font-size:20px;">
<td colspan="11"><u>(Monitoring & Evaluation Division)</u></td>
</tr>
<tr align="center" style="font-size:20px;">
<td colspan="11"><u>Monthly Format for Sub Center and Equivalent Institutions</u></td>
</tr>
<br></br>
<tr align="center">
<td>State :</td>
<td style=" border:solid black 1px;width:300px;" id='stateID'></td>
<td><td>
<td style=" border:solid black 1px;width:300px;" bgcolor="#7CFC00">Due for Submission on 5th of following Month</td>
</tr>
<tr align="center">
<td>District :</td>
<td style=" border:solid black 1px;width:300px;" id='districtID'> </td>
<td>Month<td>
<td style=" border:solid black 1px;width:300px;" id='month'></td>
</tr>
<tr align="center">
<td>Block :</td>
<td style=" border:solid black 1px;width:300px;" id='blockID'> </td>
<td>Year<td>
<td style=" border:solid black 1px;width:300px;" id='year'></td>
</tr>
<tr align="center">
<td>City/ Town/ Village:</td>
<td style=" border:solid black 1px;width:300px;" id='cityID'> </td>
</tr>
<tr align="center">
<td>Facility name :</td>
<td style=" border:solid black 1px;width:300px;" id='facilityID'> </td>
</tr>
<tr align="center">
<td >Facility type :</td>
<td style=" border:solid black 1px;width:300px;">
<label class="radio-inline"><input type="radio" id="publicID" name="facilityType" checked><span style="font-weight: bold;">Public</span></label>
<label class="radio-inline"><input type="radio" id="privateID" name="facilityType" disabled><span style="font-weight: bold;">Private</span></label>
</td>
</tr>
<tr align="center">
<td >Location :</td>
<td style=" border:solid black 1px;width:300px;">
<label class="radio-inline"><input type="radio" id="ruralID" name="location"><span style="font-weight: bold;">Rural</span></label>
<label class="radio-inline"><input type="radio" id="urbanID" name="location"><span style="font-weight: bold;">Urban</span></label></td>
</tr>
<tr style="height:80px;">
<td align="center" colspan="5" bgcolor="yellow" style=" border:solid black 1px;">&nbsp</td>
<td align="center" colspan="2" bgcolor="yellow" style=" border:solid black 1px;">Numbers reported during the Month</td>
<td align="center" colspan="2" bgcolor="yellow" style=" border:solid black 1px;">Ref.No</td>
<td align="center" colspan="1" width="2px;"></td>
<td align="center" colspan="2" bgcolor="yellow" style=" border:solid black 1px;">Validation Error</td>
</tr>
<tr style="height:35px;">
<td align="center" colspan="5" bgcolor="yellow" style=" border:solid black 1px;" >Part A. REPRODUCTIVE AND CHILD HEALTH</td>
<td align="center" colspan="2" bgcolor="yellow" style=" border:solid black 1px;" ></td>
<td align="center" colspan="2" bgcolor="yellow" style=" border:solid black 1px;" ></td>
<td align="center" colspan="1" width="2px;" ></td>
<td align="center" colspan="2" bgcolor="yellow" style=" border:solid black 1px;" ></td>
</tr>
<tr style="height:35px;">
<td align="center" bgcolor="#7CFC00" colspan="1" style=" border:solid black 1px;" >M1</td>
<td align="center" bgcolor="#7CFC00" colspan="6" style=" border:solid black 1px;" >Ante Natal Care Services (ANC)</td>
<td align="center" bgcolor="#7CFC00"colspan="2" style=" border:solid black 1px;" >M1</td>
<td align="center" colspan="1" width="2px;" ></td>
<td align="center" bgcolor="#7CFC00"colspan="2" style=" border:solid black 1px;" ></td>
</tr>
</thead>
<tbody >
<tr align="center" >
<td align="left" colspan="1" style=" border:solid black 1px;" >1</td>
<td align="center" colspan="4" style=" border:solid black 1px;text-align:left;"><b> Total number of pregnant women Registered for ANC</b> </td>
<td align="center" colspan="1" style=" border:solid black 1px;width:150px;" class="de" id='y72RhR0QcFn'> </td>
<td align="center" colspan="1"> </td>
<td align="center" colspan="2" style=" border:solid black 1px;text-align:left;">1.1</td>
<td align="center" colspan="1" style=" border:solid black 1px;text-align:left; width:0.1px;">7|txt_Numbers_1</td>
</tr>
<tr align="center" >
<td align="center" colspan="1" style=" border:solid black 1px;">1.1</td>
<td align="center" colspan="4" style=" border:solid black 1px;text-align:left;"> <i>Of which Number registered within first trimester(within 12 weeks)</i> </td>
<td align="center" colspan="1" style=" border:solid black 1px;width:150px;" class="de" id='IFYdW0qXXcy'> </td>
<td align="center" colspan="1"> </td>
<td align="center" colspan="2" style=" border:solid black 1px;text-align:left;">1.1.1</td>
<td align="center" colspan="1" style=" border:solid black 1px;text-align:left; width:0.1px;">7|txt_Numbers_1_1</td>
//this aere the formulas that i provided manually
IF(ISBLANK(F15)*ISBLANK(F16),"",IF(F16<=G15,"","No. of pregnant women registered for ANC within 1st trimester(M1-1.1) <= No. of pregnant women registered for ANC(M1-1)"))
</tr>
<tr align="center" >
<td align="left" colspan="1" style=" border:solid black 1px;">2</td>
<td align="center" colspan="4" style=" border:solid black 1px;text-align:left;">Number of New women registered under Janani Suraksha Yogna</td>
<td align="center" colspan="1" style=" border:solid black 1px;width:150px;" class="de" id='Dsam8TAhYRx'> </td>
<td align="center" colspan="1"> </td>
<td align="center" colspan="2" style=" border:solid black 1px;text-align:left;">1.2</td>
<td align="center" colspan="1" style=" border:solid black 1px;text-align:left;" width="2px;">7|txt_Numbers_2</td>
<td align="center" colspan="1" >=IF(ISBLANK(F17)*ISBLANK(F15),"",IF(F17<=F15,"","Cross Check : Number of women registered under JSY (M1-2) <= Total number of women registered for ANC(M1-1)"))</td>
</tr>

Get checkbox checked state using JQuery

I am assigned to get the boolean value of a checkbox.
I couldn't find a way to get the boolean value of the checkbox. e.g: true,false.
Is there a way to do this?
Link: https://jsfiddle.net/hongyang1033/ek30dgt9/5/
<body>
<div >
<table border=1px>
<thead>
<tr>
<th colspan="5">Description</th>
<th>Comment</th>
<th>User</th>
<th>Feedback</th>
<th>Status</th>
</tr>
</thead>
<tbody style="border-top : 1px solid black" id = "1">
<tr>
<td class="partition"><label class="label">Title:</label><label class="label ">A</label></td>
<td class="sip" style="border-left:none"><label class="label">Author:</label><label class="label">James</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="bookstore">BookStore</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="ebook">Ebook</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="library">Library</label></td>
<td rowspan="4"><textarea maxlength="180" class="animated" id="usercomment" name="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 80px; width:280px;">The book is ..........</textarea></td>
<td rowspan="4" align="center">Adam<br><button class="label label-primary" id="submit">Submit</button></td>
<td rowspan="4" align="center">Feedback Goes Here<br></td>
<td rowspan="4" align="center"><br>No Feedback Yet</td>
</tr>
<tr>
<td colspan="2" class="def"><label class="label">Genre:</label><label class="label">Fiction</label></td>
</tr>
<tr>
<td colspan="2" class="path"><label class="label label-primary" style="margin-left:5px">BookURL</label><label class="label label-primary " style="margin-left:40px">DownloadLink</label></td>
</tr>
<tr>
<td colspan="2" class="path"><a style="display:none">www.ddd.com/bookurl</a></td>
</tr>
</tbody>
JQuery
$("#submit").click(function() {
var $row = $(this).closest("tbody");
var $text = $row.document.getElementById("#emulation").checked(); //
alert($text);
});

As id is unique, hence, you can get it directly. Use, is() function to check the property.
Update from
var $text = $row.document.getElementById("#emulation").checked();
to
var $text = $("#emulation").is(":checked");

Categories