如何在复选框和文本输入中使用“其他”选项

时间:2019-04-23 21:18:30

标签: javascript php html css

当我单击“ outra”时,我试图显示文本输入,这表示复选框上的“ other”选项... 我希望它在我单击它时出现,然后它将在数据库中注册该东西。 有人知道如何帮助我吗?

具有以下功能的代码:

    <label class="checkbox-inline" for="checkboxes-4">
      <input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
      Outro
    </label>
    <input type="text" maxlength="9" class="input-field4" id="input" name="teste">
    </td>
  </tr>
  <script>
$(document).ready(function(){
        $('#input').hide();
    $(document).on('change', 'input[type="checkbox"]', function(e){
    console.log(e)
        if (e.target.id == "checkboxes-4" && e.target.checked) {
            $('#input').show();
        } else {
            $('#input').hide();
        }
    });
});
</script>

  <tr>
  <th>Doenças</th>
    <label class="checkbox-inline" for="checkboxes-7">
      <input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
      Outra
    </label>
    <input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
    </td>
  </tr>

  <tr>
    <th>Contacto em caso de emergência</td>
    <td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>"/></td>
  </tr>

</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
            </div>
</div>
        </div>
</div>
<script>
$(document).ready(function(){
        $('#input1').hide();
    $(document).on('change', 'input[type="checkbox"]', function(e){
    console.log(e)
        if (e.target.id == "checkboxes-7" && e.target.checked) {
            $('#input1').show();
        } else {
            $('#input1').hide();
        }
    });
});
</script>

1 个答案:

答案 0 :(得分:0)

您在使用框架还是其他工具?您可能想添加一个检查复选框是否选中的功能。从您的标签来看,我将提供一个JQuery建议。

要完成此任务的JQuery可能类似于:
$('#checkboxes-4').is(":checked")

然后您将有条件地显示您的文本输入。所以也许:

if ($('#checkboxes-4').is(":checked")) {
  $('#id_of_textbox').hide();
} else {
  $('#id_of_textbox').show();
}