uncheck and check checkbox need some help

**jemz** · Feb 4, 2013 10:40

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.

Code:

    $.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

HTML Code:

<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.

**Pullo** · Feb 4, 2013 15:31

Hi,

You can do it like this:

HTML Code:

<!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:

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"

HTH

**jemz** · Feb 4, 2013 22:43

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() ?

**Pullo** · Feb 5, 2013 01:40

No problem. Glad it worked!

Originally Posted by jemz

what is the diffrence between closests and .find() ?

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

Code JavaScript:

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.:

Code JavaScript:

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?

**jemz** · Feb 5, 2013 09:25

Yup

Great,thank you again.

User Tag List

Thread: uncheck and check checkbox need some help

Thread Tools

Display

Hybrid View

uncheck and check checkbox need some help

Bookmarks

Bookmarks

Posting Permissions