javascript - 带复选框数组的 Form.Serialize

Question

我正在使用 form.serialize 方法通过 JQuery 提交表单。但同一个表单有一组复选框，由 PHP 函数动态生成这是形式:

<form class="form" id="formNewClient" role="form">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#clientdata" data-toggle="tab"><i class="fa fa-user"></i> Dados Cliente</a></li>
                <li><a href="#phoneparkdata" data-toggle="tab"><i class="fa fa-phone"></i> Dados Phonepark</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="clientdata">
            <div class="row">
            <div class="col-md-12">
                            <div class="page-header"><h3>Dados Pessoais</h3></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="name">Nome Completo:*</label>
                            <input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="email">Email:</label>
                            <input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="addressone">Morada:</label>
                            <input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
                        </div>
                    </div>
                    <div class="row"> 
                        <div class="form-group col-md-6">
                            <label for="address2">Morada (cont.):</label>
                            <input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="postalcode">Código Postal:</label>
                            <input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="city">Localidade:</label>
                            <input type="text" name="clientCity" class="form-control" placeholder="Localidade">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label for="clientNif">NIF</label>
                            <input type="text" name="clientNif" class="form-control " placeholder="NIF">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="clientBirthdate">Data de Nascimento</label>
                            <div class="form-group">
                <div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
                <input type='text' name="clientBirthdate" class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="sex">Sexo:</label>
                            <br>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadioSex" value="M">
                            Masculino
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadioSex" value="F">
                            Feminino
                        </label>
                        </div>
                    </div>
        </div>
        <!--END CLIENTDATA-->
        <div class="tab-pane" id="phoneparkdata">
            <div class="row">
                        <div class="col-md-12">
                            <div class="page-header">
                                <h3>Dados Phonepark</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><h4>Documentos:</h4></div>
                        <div class="form-group col-md-4">
                            <label for="document">Tipo de Documento:</label>
                            <select name="documenttype" class="form-control">
                                <?php selectListDocuments();?>
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="documentNumber">Número do Documento:*</label>
                            <input type="text" name="documentNumber" class="form-control">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="documentNumber">Número do Documento (Secundário):</label>
                            <input type="text" name="documentNumberSec" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><h4>Comunicações:</h4></div>
                        <div class="form-group col-md-4">
                            <label for="phone1">Telemóvel:*</label>
                            <input type="text" name="clientPhonePri" class="form-control">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="phone2">Telemóvel Secundário:</label>
                            <input type="text" name="clientPhoneSec" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <h4>Perfil:</h4>
                            <label for="profile">Perfil(s) a utilizar:*</label>
                            <?php 
                                profileCheckBoxes();
                            ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="activationDate">Data de Activação:</label>
                            <div class="form-group">
                <div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
                <input type='text' name="clientActivationTime" class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="limitDate">Data de Limite:</label>
                            <div class="form-group">
                <div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
                <input type='text' name="clientDeactivationTime" class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
                        </div>
                    </div>
                </div>
                <!--END PHONEPARKDATA-->    
            </div>
    <!--END TAB-CONTENT-->
    <div class="row">
        <div class="col-md-4 col-lg-4 pull-right">
            <button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
                </div>
            </div>
        </form>

这是生成复选框的 php 函数:

function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
  while($row = mysqli_fetch_array($listProfiles)){
    ?>
    <label class="checkbox-inline">
      <input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
      <?php echo $row['Nome']; ?>
    </label>
    <?php
  }
}
}

如何在 Jquery 中使用 form.serialize 提交表单，并在 PHP 端处理复选框，以便从复选框数组中提取值？

Answer 1

这个 jQuery 文档页面解释了如何使用序列化函数: http://api.jquery.com/serialize/

如果您随后使用 POST 将输出传递到 PHP 页面，则在 PHP 脚本中检查的值将作为数组存储在 $_POST['profiles'] 中。因此，要循环遍历复选框的值，您可以使用:

foreach ($_POST['profiles'] as $profile) {  
    //process code here
}