Problem with Toggling Two Checkboxes

Problem with Toggling Two Checkboxes

Hi,
I am trying to change a css dispaly property of div by selecting and unselecting a checkbox following this script:
  1. <td>
  2. <input type="checkbox" id="c1" name="cc" />
  3. <label for="c1"> <span> </span> Display : None </label>
  4. <input type="checkbox" id="c2" name="cc" />
  5. <label for="c2"><span> </span> Display : Inline </label>
  6. </td>
and the jquery is:

  1.     $('input:checkbox').change(function(){
              
        if($('#c2').attr('checked')){
            $('#casradios').css("display", "block"); 
            $('#c1').attr('checked',false);
        } else{
         $('#casradios').css("display", "none");
              $('#c2').attr('checked',false);






  2.          }
     }); 
As you can see the code works perfectly when user select the #c2 
(it uncheck the #c1 but it doesn’t work properly on select the #c1

Can you please let me know how i cam use toggle function to solve 
this problem?

Regards,