SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post uncheck and check checkbox need some help

    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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,064
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,064
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problem. Glad it worked!

    Quote Originally Posted by jemz View Post
    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?

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yup Great,thank you again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •