Nested UL Example

by SEOKWOO LEE

HTML

<table id="codexpl">
    <thead>
        <th><input type='checkbox' name='checkAll'></th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </thead>
    <tbody>
      <tr>
          <td><input type='checkbox' name='userInfo' value='1'></td>
          <td>This</td>
          <td>Column</td>
          <td>Is</td>
      </tr>
      <tr>
          <td><input type='checkbox' name='userInfo' value='2'></td>
          <td>Coloumn</td>
          <td>two</td>
          <td>this</td>
      </tr>
      <tr>
          <td><input type='checkbox' name='userInfo' value='3'></td>
          <td>is</td>
          <td>not equals</td>
          <td>a</td>
      </tr>
      <tr>
          <td><input type='checkbox' name='userInfo' value='4'></td>
          <td>the</td>
          <td>Column</td>
          <td>real</td>
      </tr>
      <tr>
          <td><input type='checkbox' name='userInfo' value='5'></td>
          <td>first</td>
          <td>One</td>
          <td>Coloumn</td>
      </tr>
    </tbody>
</table>
<button id="doSomething">getvalue</button>
<button id="getTdValue">what is inside of td</button>

<div class="radioDiv">
  <input type="radio" name="userInfoRadio" value="1" checked>1
  <input type="radio" name="userInfoRadio" value="2">2
  <input type="radio" name="userInfoRadio" value="3">3
</div>

CSS

#codexpl th, #codexpl td{
    padding:0.5em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

JavaScript

$(document).ready(function(){
	$("#doSomething").click(function(){
  	var idList="";
  	$('input[name="userInfo"]:checked').each(function(){
        		idList += $(this).val(); 
 		});
    alert(idList);
  });
  
  $("#getTdValue").click(function(){
  	$('#codexpl td:last-child').each(function(index){
    		alert(index+ $(this).text());
    });
  });
  
	$("input[name='checkAll']").click(function(){
  	if(  $(this).prop("checked")  ){
    	$("input[name='userInfo']").attr("checked",true);
    } else {
    	$("input[name='userInfo']").attr("checked",false);
    }
  });
  
  $("input[type=radio]").change(function(){
  	if($(this).val() == '1'){
    	$("input[name='userInfo']").attr("disabled",true);
    }else{
    	$("input[name='userInfo']").attr("disabled",false);
    }
	});
  
});