title: changing the checked attribute of checkbox using jquery
body: <p>I have to control the checked status a list of checkboxes from another checkbox. </p>
  
  <h2>HTML:</h2>
  
  <pre><code>    &lt;input id="readall" name="readall" type="checkbox" value="1"&gt;
  &lt;div id="permGrid"&gt;
      &lt;input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read"&gt;
      &lt;input id="group.read" name="group.read" type="checkbox" value="1" rel="read"&gt;
      &lt;input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>JS:</h2>
  
  <pre><code>$('#readall').click(function()
  {
      var checkStatus = $(this).is(':checked');
      var checkboxList =  $('#permGrid input[rel="read"]');
      $(checkboxList).attr('rel', 'read').each(function(index)
      {
          if(checkStatus == true)
          {
              $(this).attr('checked', 'checked');
              console.log($(this).attr('checked'));
          }
          else
          {
              $(this).removeAttr('checked').reload();
              console.log($(this).attr('checked'));
          }
      });
  });
  </code></pre>
  
  <p>The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?</p>
  
  <p>I found something similar <a href="http://jsfiddle.net/gubhaju/Vj6wY/3/" rel="nofollow"><strong>here</strong></a>. I compared the code and mine and this code is somewhat similar but mine doesn't work.</p>