jquery删除了已检查的类，但在php中，复选框出现在$ _POST中

Question

I have 2 checkboxes in a form: Registered and Not Registered.

If Registered is being checked then 2 more options should appear: Active and Not Active.

If unchecking Registered then Active and Not Active options should be hidden too (and unchecked too).

I've managed to do this so far in jQuery, but when I do a var_dump($_POST), options Active and Not Active (despite they don't appear checked) still appear in $_POST. And that is wrong.

Here the view: (just ignore the code into {} that's there bc I use Smarty template engine)

<div class="row-fluid">
  <div class="span6">
    <div class="control-group">
      <label class="control-label tooltips" data-placement="top" data-original-title="Campo Obligatorio">Tipo de Socio<span class="required">*</span></label>
      <div class="controls">
        <label class="checkbox line">
          <input type="checkbox" id="registered" value="1" name="type[registered]"/> Registered
        </label>
        <label class="checkbox line">
          <input type="checkbox" id="preregistered" value="0" name="type[preregistered]"/> Not Registered
        </label></br>
        <span class="help-block">Seleccione una o ambas opciones</span>
      </div>
    </div>
  </div>    

  <div class="span6">
    <div id="active">
      <div class="control-group">
       <label class="control-label">Estado del Socio</label>
         <div class="controls">
          <label class="checkbox line">
            <span class="checked">
            <input type="checkbox" id="act" value="1" name="active[active]" {if $okInfo['active']['active'] eq '1'}checked{/if}/> Active
            </span>
          </label>
          <label class="checkbox line">
           <span class="checked">
            <input type="checkbox" id="notact" value="0" name="active[notactive]" {if $okInfo['active']['notactive'] eq '0'}checked{/if}/> Not Active
           </span>
          </label></br>
          <span class="help-block">Seleccione una o ambas opciones</span>
        </div>
      </div>
    </div>
  </div>    
</div>

I have a js file which It's being called from the view:

$('.hide').hide();

$('#active').addClass('hide');

$('#registered').click(function(){
  if ($(this).is(':checked')){
    $('#active').show('fast');
}else{  
    if ($('#act').parent('span').attr('class') == 'checked') {
        $('#act').parent('span').removeClass('checked');
    };
    if ($('#notact').parent('span').attr('class') == 'checked') {
        $('#notact').parent('span').removeClass('checked');
    };
    $('#active').hide('fast');
}
});

As you can see I remove the span class checked and everything seems to be ok. But if I can even see the boxes are being unchecked why when doing a var_dump it appears on $_POST?

Here is the form -

    <form action="{site_url()}admin/usersFormReport" class="form-horizontal form-bordered" method="post" enctype="multipart/form-data">

and in function usersFormReport I do a var_dump. The result is this:

array (size=2)
'title' => string '' (length=0)
'active' => 
  array (size=2)
    'active' => string '1' (length=1)
    'notactive' => string '0' (length=1)

Answer 1

An HTML class has no relation to the actual state of the checkbox, you want to use .prop() to actually toggle the checked state:

var $act = $('#act'),
    $notact = $('#notact');

if ($act.is(':checked')) {
    $act.prop('checked', false);
    $act.parent('span').removeClass('checked');
}
if ($notact.is(':checked')) {
    $notact.prop('checked', false);
    $notact.parent('span').removeClass('checked');
}