I have a table where it shows the list of deleted items.
User can either recover the item or delete permanently. i need help in making only one checkbox is checked in a table row and uncheck other checkbox when user try to check both. Also when checkbox is checked in table header, it should select all the checkboxes in that td.
$(function() {
$('input.example').on('change', function() {
$("tr").closest('input.example').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
<table>
<th>
<label>
<input type="checkbox" class="example" />Recover</label>
<label>
<input type="checkbox" class="example" />Delete</label>
</th>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
</table>
</div>
This is exactly the scenario where you should be using radio inputs, not checkboxes, as you get this behaviour by default without the need for any JS code. All you have to do is group the required input elements by their name attribute. Try this:
<div ng-app>
<table>
<th>
<label><input type="radio" name="foo1" />Recover</label>
</th>
<th>
<label><input type="radio" name="foo1" />Delete</label>
</th>
<tr>
<td>
<input type="radio" name="foo2" />
</td>
<td>
<input type="radio" name="foo2" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="foo3" />
</td>
<td>
<input type="radio" name="foo3" />
</td>
</tr>
</table>
</div>
i figured it out myself without using radio buttons and its working fine.
JS code
$scope.uncheckPermDelete = function (ip) {
if($("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', false);
ip.perm_delete = 0;
}
};
$scope.uncheckRecover= function (ip) {
if($("input[name=recover_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=recover_check_"+ ip.id +"]").prop('checked', false);
ip.deleted = 1;
}
};
HTML code
<td ><input class="recover_check" name="recover_check_{{ip.id}}" ng-change="uncheckPermDelete(ip)" type="checkbox" ng-model="ip.deleted" ng-true-value="0" ng-false-value="1" /></td>
Related
I am trying to get data-region-code attribute from all the checkbox that were changed (checked/unchecked). But with my code, I am getting the last changed checkbox, not all the checkboxes. For eg: If I'm changing checkbox for data-region-code 001, 002, 003, 004, I will get the value as 004 as it is the last changed checkbox.
For reference: when checkbox is changed, I add class=changed for input.
Structure (I have more tr, maybe around 18-20 with same structure):
<table class= settings-container">
<thead></thead>
<tbody>
<tr id="">
<td></td>
<td></td>
<td>
<input type="checkbox" name="blockage_simulation[]" data-region-code="001" id="blockage_simulation" checked="" class="changed">
</td>
</tr>
<tr id="">
<td></td>
<td></td>
<td>
<input type="checkbox" name="blockage_simulation[]" data-region-code="002" id="blockage_simulation" class="changed">
</td>
</tr>
</tbody>
</table>
Code:
let regCodeAllRegions = [];
regCodeAllRegions = $('.settings-container').find('input:checkbox.changed').attr('data-region-code');
alert(JSON.stringify(regionCode));
Method attr only works for a single element, so it returns only the last one. You need to iterate through the list. This is an example:
let regionCodes = [];
$('input:checkbox.changed').each((i, el) => regionCodes.push($(el).data('region-code')));
console.log(regionCodes);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="changed" data-region-code="1">
<input type="checkbox" class="changed" data-region-code="2">
<input type="checkbox" class="changed" data-region-code="3">
<input type="checkbox" class="changed" data-region-code="4">
<input type="checkbox" class="changed" data-region-code="5">
Another way:
let regionCodes = $('input:checkbox.changed').toArray().map((el) => $(el).data('region-code'));
console.log(regionCodes);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="changed" data-region-code="1">
<input type="checkbox" class="changed" data-region-code="2">
<input type="checkbox" class="changed" data-region-code="3">
<input type="checkbox" class="changed" data-region-code="4">
<input type="checkbox" class="changed" data-region-code="5">
I have been searching solutions for this and found that the most effective way is through a hacky workaround like this, but none of them has posted a working way to catching every tick and untick box for a dynamic input row using a lot of checkbox arrays.
I looked around and saw a script way -- let hidden inputs be the POST source and change value according to their adjacent checkbox upon submit. However the jquery doesn't seem to work -- it always submits a value of 0 (whatever the value attribute inside hidden inputs.
$(document).ready(function() {
$('#frm').submit(function() {
$('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
Your code works
I will delete this answer once we have discussed it
I have changed hidden to text and added preventDefault to show it works
$(document).ready(function() {
$('#frm').on("submit",function(e) {
e.preventDefault(); //while testing
$('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="text" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
<input type="submit"/>
</form>
Consider the following example.
$(function() {
function getTableData(table) {
var results = [];
$("tbody > tr", table).each(function(i, row) {
results.push({
id: $(row).data("uid"),
isHeadofHousehold: $("input", row).eq(0).prop("checked"),
isEmployed: $("input", row).eq(1).prop("checked")
});
});
return results;
}
$('#frm').on("submit", function(e) {
e.preventDefault();
var formData = getTableData($("#myTable"));
console.log(formData);
});
});
.checkbox {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Head of Household</th>
<th>Employed</th>
</tr>
</thead>
<tbody>
<tr data-uid="1001">
<td>Homer Simpson</td>
<td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]" checked></td>
<td class="checkbox"><input type="checkbox" name="isEmployed[]" checked></td>
</tr>
<tr data-uid="1002">
<td>Marge Simpson</td>
<td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]"></td>
<td class="checkbox"><input type="checkbox" name="isEmployed[]"></td>
</tr>
</tbody>
</table>
<input type="submit" value="Save" />
</form>
You now have:
[
{
"id": 1001,
"isHeadofHousehold": true,
"isEmployed": true
},
{
"id": 1002,
"isHeadofHousehold": false,
"isEmployed": false
}
]
You can then use AJAX to POST this data back to PHP so the changes can be saved to SQL. As mentioned, you can switch them to 1 and 0 respectively if you choose.
Update
Returning to OP's desired method, consider the following.
$(function() {
$("#frm").on("change", "input[type='checkbox']", function(event) {
$(this).prev(".checkboxHandler").val($(this).prop("checked") ? 1 : 0);
});
});
.checkbox {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Head of Household</th>
<th>Employed</th>
</tr>
</thead>
<tbody>
<tr data-uid="1001">
<td>Homer Simpson</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="1" />
<input type="checkbox" checked />
</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="1" />
<input type="checkbox" checked />
</td>
</tr>
<tr data-uid="1002">
<td>Marge Simpson</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0" />
<input type="checkbox" />
</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0" />
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Save" />
</form>
This updates the hidden text box value when a User makes a change.
If you are insistent on using the original code, use the following:
$('input[type="checkbox"]:checked').prevAll('.checkboxHandler').val(1);
I strongly advise not using this, as it's a one way logic and if the User unchecks a box before the form is submitted, the change will not be captured.
Update 2
Based on the Top rated answer here, you could also do this:
<td>
<input type="hidden" name="isHeadOfFamily[]" value="0">
<input type="checkbox" name="isHeadOfFamily[]" value="1">
</td>
<td>
<input type="hidden" name="isEmployed[]" value="0">
<input type="checkbox" name="isEmployed[]" value="1">
</td>
The only caveat is that if the User checks a box, both values would get sent. So as suggested, disable the hidden upon submit if unchecked.
$("#frm").submit(function(){
$('input[type="checkbox"]:checked').prevAll().prop("disabled", true);
});
I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
I have a table like this:
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
And I want to get the hidden value in the same td as the checked checkbox.
I tried this:
$("#TempTable tr input:checkbox:checked").each(function(){
alert($("#"+this.id).parent("td").child("input:hidden").val());
});
Of course, after I get value what I want, I will save it to an Array.
Not sure why the values are not on the checkbox, it would simplify the code.
But With your code, you would just use next and map.
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return $(this).next().val();
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
and as I said before putting the values on the checkbox simplify's it
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return this.value;
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1" value="1"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3" value="3"/>
</td>
</tr>
</table>
Try this:
$("input[type='checkbox']").each( function (){
var value = $(this).parent().find("input:hidden").val();
// this will return the value of each hidden field
});
You can use siblings and input type hidden to get the value.
$("#TempTable tr input[type=checkbox]:checked").each(function(){
$(this).siblings('input[type=hidden]').val()
});
I have a set of input checkboxes with the same name
and I would like to determine which checkboxes have been checked using javascript, how can I achieve that?
I know only how to get all the checkboxes as follows:
var checkboxes = document.getElementsByName('mycheckboxes');
In IE9+, Chrome or Firefox you can do:
var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');
A simple for loop which tests the checked property and appends the checked ones to a separate array. From there, you can process the array of checkboxesChecked further if needed.
// Pass the checkbox name to the function
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
var checkboxesChecked = [];
// loop over them all
for (var i=0; i<checkboxes.length; i++) {
// And stick the checked ones onto an array...
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
// Return the array if it is non-empty, or null
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
// Call as
var checkedBoxes = getCheckedBoxes("mycheckboxes");
For a simple two- (or one) liner this code can be:
checkboxes = document.getElementsByName("NameOfCheckboxes");
selectedCboxes = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked==true);
Here the Array.prototype.slice.call() part converts the object NodeList of all the checkboxes holding that name ("NameOfCheckboxes") into a new array, on which you then use the filter method. You can then also, for example, extract the values of the checkboxes by adding a .map(ch => ch.value) on the end of line 2.
The => is javascript's arrow function notation.
Get all the checked checkbox value in an array - one liner
const data = [...document.querySelectorAll('.inp:checked')].map(e => e.value);
console.log(data);
<div class="row">
<input class="custom-control-input inp"type="checkbox" id="inlineCheckbox1" Checked value="option1">
<label class="custom-control-label" for="inlineCheckbox1">Option1</label>
<input class="custom-control-input inp" type="checkbox" id="inlineCheckbox1" value="option2">
<label class="custom-control-label" for="inlineCheckbox1">Option2</label>
<input class="custom-control-input inp" Checked type="checkbox" id="inlineCheckbox1" value="option3">
<label class="custom-control-label" for="inlineCheckbox1">Option3</label>
</div>
You can just give a class for all checkboxes in the form, and get their checked property like this:
document.querySelectorAll('.mycheckbox').forEach(function(elem) {
console.log(elem.checked);
});
<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="1" checked="checked">Johnson</label>
</div>
<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="2">
Henry</label>
</div>
<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="3" checked="checked">
Donald</label>
</div>
$(document).ready(function () {
// Single check Box Checked
$(document).on("change", ".check_class", function () {
$(".check_class").prop("checked", false);
$(this).prop("checked", true);
var value = $(this).val();
console.log("Device Serial No is = " + value)
});
//get all emp Selected
$(document).on("click", "#EmpUpload", function (evnt) {
var emp =[]
const data = [...document.querySelectorAll('.EmpID:checked')].map(e => e.value);
emp.push(data)
console.log("Selected Emp Here [] = " + emp);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Employee CheckBox Data Sample </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid w-75 pt-5">
<div class="row border-top">
<div class="col-md-12">
<button type="button" class="btn btn-success float-right" id="EmpUpload">Get On Click</button>
</div>
<div class="col-md-4 border-right">
<table id="example" class="display w-100">
<thead>
<tr>
<th>#</th>
<th>Device</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_class" value="990099" name="serialNo" /></td>
<td>Office</td>
<td>Delhi</td>
</tr>
<tr>
<td><input type="checkbox" class="check_class" value="778899" name="serialNo" /></td>
<td>Garrett</td>
<td>Accountant</td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-8">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="EmpID" value="1001" name="serialNo" /></td>
<td>1001</td>
<td>Shaqubi Hassan</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1002" name="serialNo" /></td>
<td>1002</td>
<td>Balwinder Singh</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1003" name="serialNo" /></td>
<td>1003</td>
<td>Balwinder Singh</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1004" name="serialNo" /></td>
<td>1004</td>
<td>Singh</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1005" name="serialNo" /></td>
<td>1005</td>
<td>Sohi</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
if you are using the <form> element you can take advantage of the form event using :
function onSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
console.log(data.getAll("mycheckboxs")) // will print only checked inputs
}
<form onsubmit="onSubmit(event)">
<label for="checkbox1">
Checkbox 1
<input id="checkbox1" name="mycheckboxs" type="checkbox" checked="true" value="1"/>
</label><br/>
<label for="checkbox2">
Checkbox 2
<input id="checkbox2" name="mycheckboxs" type="checkbox" value="2"/>
</label><br/>
<label for="checkbox3">
Checkbox 3
<input id="checkbox3" name="mycheckboxs" type="checkbox" value="3"/>
</label><br/>
<label for="checkbox4">
Checkbox 4
<input id="checkbox4" name="mycheckboxs" type="checkbox" checked="true" value="4"/>
</label><br/>
<div>
<br/>
<button type="submit">Submit</button>
</div>
</form>
Good luck!!