JQUERY Add checked attribute to checkbox depending on Table column value `Status` (1 or 0)

Question

I've been googling really hard on this but putting the keywords checkbox and table together gives me results of "getting row values of checked row".

And I've landed to rare questions with the same concerns but it is all advanced (ajax, angularjs) I'm just a student-level programmer(basic jquery at most).

so I have this: So what it does is it takes the values of the cell and puts it into textbox, no problem there but I want to take the value of status which is 1 (for active) and put it into a checkbox, if the value is 1 the checkbox will be checked, and if 0 it will not be checked.

I thank you all in advance, and please forgive the student-y coding, I'd appreciate any corrections though, although my understanding is limited, I'm continuously trying to widen my knowledge.

 $(document).ready(function(){ $(".buttonedit").click(function(){ var Lastname = $(this).closest("tr").find("td:eq(0)").text(); var Firstname = $(this).closest("tr").find("td:eq(1)").text(); var Status = $(this).closest("tr").find("td:eq(2)").text(); $("#lname").val(Lastname); $("#fname").val(Firstname); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="solid"> <thead> <tr> <td>lastnmae</td> <td>firstname</td> <td>status</td> <td>action</td> </tr> </thead> <tbody> <tr> <td>gates</td> <td>bill</td> <td>1</td> <td><button class="buttonedit">Edit</button></td> </tr> </tbody> </table> <form action=""> <input type="text" placeholder="enter lastname"id="lname"><br> <input type="text" placeholder="enter firstname"id="fname"><br> <input type="checkbox" name="status" id="status">Active?<br> </form> 

Answer 1

Doing pretty well, Just Add this line:

$('#status').attr('checked',Status=='1'); 

in your script.

Answer 2

Here you go with the solution https://jsfiddle.net/n5s721bv/

 $(document).ready(function(){ $(".buttonedit").click(function(){ var Lastname = $(this).closest("tr").find("td:eq(0)").text(); var Firstname = $(this).closest("tr").find("td:eq(1)").text(); var Status = $(this).closest("tr").find("td:eq(2)").text(); $("#lname").val(Lastname); $("#fname").val(Firstname); $('#status').prop('checked', parseInt(Status)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="solid"> <thead> <tr> <td>lastnmae</td> <td>firstname</td> <td>status</td> <td>action</td> </tr> </thead> <tbody> <tr> <td>gates</td> <td>bill</td> <td>1</td> <td><button class="buttonedit">Edit</button></td> </tr> <tr> <td>Test</td> <td>Test11</td> <td>0</td> <td><button class="buttonedit">Edit</button></td> </tr> <tr> <td>Test9</td> <td>bill</td> <td>1</td> <td><button class="buttonedit">Edit</button></td> </tr> </tbody> </table> <form action=""> <input type="text" placeholder="enter lastname"id="lname"><br> <input type="text" placeholder="enter firstname"id="fname"><br> <input type="checkbox" name="status" id="status">Active?<br> </form> 

Since Status variable contains the data but it's typeof is string so I'm changing it to integer using parseInt as checkbox checked / unchecked.

Answer 3

To achieve this you can use prop() to set the checked state of the checkbox. To make it work you need to set the value as a boolean. To achieve that you can use the result of Status == '1' , like this:

 $(document).ready(function() { $(".buttonedit").click(function() { var Lastname = $(this).closest("tr").find("td:eq(0)").text(); var Firstname = $(this).closest("tr").find("td:eq(1)").text(); var Status = $(this).closest("tr").find("td:eq(2)").text(); $("#lname").val(Lastname); $("#fname").val(Firstname); $('#status').prop('checked', Status == '1'); // note this line }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="solid"> <thead> <tr> <td>lastnmae</td> <td>firstname</td> <td>status</td> <td>action</td> </tr> </thead> <tbody> <tr> <td>gates</td> <td>bill</td> <td>1</td> <td><button class="buttonedit">Edit</button></td> </tr> <tr> <td>ballmer</td> <td>steve</td> <td>0</td> <td><button class="buttonedit">Edit</button></td> </tr> </tbody> </table> <form action=""> <input type="text" placeholder="enter lastname" id="lname"><br> <input type="text" placeholder="enter firstname" id="fname"><br> <input type="checkbox" name="status" id="status">Active?<br> </form>