Get Current Selected Checkbox value using jQuery

Question

I need to get current selected value from selected check box from table.Below the code i am using for get selected value from checkbox.But It is getting all the selected value from table.I need only selected table row value.

 $.each($('input[type="checkbox"]:checked').closest("td").next("td"), function() { values.push($(this).text().trim()) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="DeviceTable" class="table table-bordered"> <thead> <tr class="info"> <th style="width: 10px;"> <input type="checkbox" id="check_selectall-custom" onclick="selectAllCustom(this)" />SA</th> <th>Device</th> <th> Type</th> <th> Model</th> <th> Status</th> </tr> </thead> <tbody class="parameter_table"> <tr id="tr_device_id1"> <td> <input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()"> </td> <td id="macadd" style="word-break:break-all;"> Mac1 </td> <td style="word-break:break-all;"> Dev 1 </td> <td style="word-break:break-all;"> Model 1 </td> <td class="Selected_Device" id="Selected_Device"> <b id="Selected_Device" style="float: right;"></b> </td> </tr> <tr id="tr_device_id2"> <td> <input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()"> </td> <td id="macadd" style="word-break:break-all;"> Mac 2 </td> <td style="word-break:break-all;"> Parm 2 </td> <td style="word-break:break-all;"> Model 2 </td> <td class="Selected_Device" id="Selected_Device"> <b id="Selected_Device" style="float: right;"></b> </td> </tr> </tbody> </table> 

Answer 1

Give your TDs a class instead of ID

I do not know what you want to click, but here I do it on click of the checkbox

 $(function() { // assuming jquery is loaded, execute on page load $("#check_selectall-custom").on("click", function() { var checked = this.checked; $("input[type=checkbox]").not(this).prop("checked",checked); }); $("#getval").on("click", function() { var values = $("input[type=checkbox]:checked").not(this).map(function() { return $(this).closest("tr").find(".macadd").text().trim(); }).get(); $("#res").html(values.join("<br/>")) }); }); 

 #tr_device_id1 td { word-break: break-all } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="DeviceTable" class="table table-bordered"> <thead> <tr class="info"> <th style="width: 10px;"> <label><input type="checkbox" id="check_selectall-custom" />SA</label> </th> <th>Device</th> <th> Type</th> <th> Model</th> <th> Status</th> </tr> </thead> <tbody class="parameter_table"> <tr id="tr_device_id1"> <td> <input type="checkbox" name="checkBox[]"> </td> <td class="macadd"> Mac 1 </td> <td class="device"> Dev 1 </td> <td class="model"> Model 1 </td> <td class="Selected_Device"> </td> </tr> <tr id="tr_device_id2"> <td> <input type="checkbox" name="checkBox[]"> </td> <td class="macadd"> Mac 2 </td> <td class="device"> Dev 2 </td> <td class="model"> Model 2 </td> <td class="Selected_Device"> </td> </tr> </tbody> </table> <button type="button" id="getval">Show checked</button> <span id="res"></span> 

Answer 2

 var TotalChkBx; $("input:checkbox").on("click", function() { var n = $("input:checkbox").index(this); $('#detail').append("Column 1" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(1) ").text() + '<br/>'); $('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>'); $('#detail').append("Column 3" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(3) ").text() + '<br/>'); $('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>'); }); function CheckAll(CheckBox) { $('#detail').html(""); var TargetBaseControl = document.getElementById("DeviceTable"); // objRef.parentNode.parentNode.parentNode; var TargetChildControl = "check"; //var Check_TEXT = "CHECK_CheckBox" var Inputs = TargetBaseControl.getElementsByTagName("input"); // var Spans = TargetBaseControl.getElementsByTagName("span"); for (var n = 0; n < Inputs.length; ++n) { if ((Inputs[n].type === 'checkbox')) // { Inputs[n].Checked = CheckBox.checked; $("#" + Inputs[n].id).attr("Checked", CheckBox.checked); $('#detail').append("Column 1" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(1) ").text() + '<br/>'); $('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>'); $('#detail').append("Column 3" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(3) ").text() + '<br/>'); $('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>'); } // else { $('#detail').html("");} } Counter = CheckBox.checked ? TotalChkBx : 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="DeviceTable" class="table table-bordered"> <thead> <tr class="info"> <th style="width: 10px;"> <input type="checkbox" id="check1" name="checkBox" id="check_selectall-custom" onclick="CheckAll(this)" />SA</th> <th>Device</th> <th> Type</th> <th> Model</th> <th> Status</th> </tr> </thead> <tbody class="parameter_table"> <tr id="tr_device_id1"> <td> <input type="checkbox" id="check2" name="checkBox"> </td> <td id="macadd" style="word-break:break-all;"> Mac1 </td> <td style="word-break:break-all;"> Dev 1 </td> <td style="word-break:break-all;"> Model 1 </td> <td class="Selected_Device" id="Selected_Device"> <b id="Selected_Device" style="float: right;"></b> </td> </tr> <tr id="tr_device_id2"> <td> <input type="checkbox" id="check3" name="checkBox"> </td> <td id="macadd" style="word-break:break-all;"> Mac 2 </td> <td style="word-break:break-all;"> Parm 2 </td> <td style="word-break:break-all;"> Model 2 </td> <td class="Selected_Device" id="Selected_Device"> <b id="Selected_Device" style="float: right;"></b> </td> </tr> </tbody> </table> <div id="detail"></div>