Uncheck and check checkbox need some help

JavaScript
1

Hi, I have another problem in checkbox,How do i uncheck the checkbox if the value of my td is “E” with a class name “recemp”,

I am trying to traverse but i could not get what i want

here is my code
lets say my ajax succesfully request from the server.


    $.ajax({
	 type: 'post',
	 data: {emp:empno},
	 url: "somefile.php",
	 success: function(dataTable){
	
		$('#loadinDiv').html(dataTable);
		
		$('tr.contents').each(function(){
			if(('td.recemp').attr('value','E')){
			   $(this).next('input[name="cbox[]":checkbox]').attr('checked','checked');
			}
		});
		
	
	 }
  });

Here is the request came from the server via jquery.ajax


<table class="maintable">

 <tr  class="class1 class2" >
		<td><span><input type="checkbox" name="cbox[]" value="0002" id="50"/> </span></td>
		<td><span>1</span></td>
		<td class="recemp" value="E"><span>E</span></td>
		<td><span>100</span></td>
		<td><span>Engineer</span></td>
		
</tr>		


 <tr  class="class1 class2" >
		<td><span><input type="checkbox" name="cbox[]" value="0003" id="40"/> </span></td>
		<td><span>2</span></td>
		<td class="recemp" value="C"><span>C</span></td>
		<td><span>100</span></td>
		<td><span>Mechanical</span></td>
</tr>		



 <tr  class="class1 class2" >
		<td><span><input type="checkbox" name="cbox[]" value="0004" id="20"/> </span></td>
		<td><span>2</span></td>
		<td class="recemp" value="E"><span>E</span></td>
		<td><span>100</span></td>
		<td><span>Supervisor</span></td>
</tr>		

 <tr  class="class1 class2" >
		<td><span><input type="checkbox" name="cbox[]" value="0006" id="20"/> </span></td>
		<td><span>2</span></td>
		<td class="recemp" value="C"><span>C</span></td>
		<td><span>100</span></td>
		<td><span>Caschier</span></td>
</tr>	


</table>

Thank you in advance.

2

Hi,

You can do it like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unbenanntes Dokument</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <table class="maintable">
      <tr class="class1 class2" >
        <td><span><input type="checkbox" name="cbox[]" value="0002" id="50"/> </span></td>
        <td><span>1</span></td>
        <td class="recemp" value="E"><span>E</span></td>
        <td><span>100</span></td>
        <td><span>Engineer</span></td>
      </tr>    
      
      <tr class="class1 class2" >
        <td><span><input type="checkbox" name="cbox[]" value="0003" id="40"/> </span></td>
        <td><span>2</span></td>
        <td class="recemp" value="C"><span>C</span></td>
        <td><span>100</span></td>
        <td><span>Mechanical</span></td>
      </tr>    
      
      <tr class="class1 class2" >
        <td><span><input type="checkbox" name="cbox[]" value="0004" id="20"/> </span></td>
        <td><span>2</span></td>
        <td class="recemp" value="E"><span>E</span></td>
        <td><span>100</span></td>
        <td><span>Supervisor</span></td>
      </tr>    
      
      <tr class="class1 class2" >
        <td><span><input type="checkbox" name="cbox[]" value="0006" id="20"/> </span></td>
        <td><span>2</span></td>
        <td class="recemp" value="C"><span>C</span></td>
        <td><span>100</span></td>
        <td><span>Caschier</span></td>
      </tr>  
    </table>
    
    <script>
      $(document).ready(function() {
        $('input[type=checkbox]').each(function(){
          t = $(this).closest('td').nextAll('.recemp').text();
          if (t != 'E'){
            $(this).prop("checked", "chcked");
          }
        }); 
      });
    </script>
  </body>
</html>

Let me explain what’s going on in the JS:

[LIST]
[]We select all checkboxes
[]We go backwards up the DOM to find the closest <td> element
[]We get the next sibling of that <td> element which has a class of “.recemp” and select its text
[]We check the checkbox if the text value of this element is not equal to “E”
[/LIST]HTH

3

Hi pullo, Thank you so much it works great,Thank you also for explaining about your JS…ahm what is the diffrence between closests and .find() ?

4

No problem. Glad it worked!

.find() will get the descendants of each element in the current set of matched elements. E.g.:

console.log($(".maintable").find("td").length);

Outputs “20”

Here .find() traverses the whole table.maintable looking for matches.

.closest(), on the other hand will get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. E.g.:

console.log($("#50").closest("td").length);

Outputs “1”

Here .closest() works its way back up through the DOM until it finds a <td>, then it stops.

Does that help?

5

Yup :slight_smile: Great,thank you again.