如果选中复选框，如何执行操作

Question

这是我想要做的：我有一个表单，上面有一个复选框。选中该复选框时，我希望显示一些其他字段，未选中时我希望不显示这些字段。同样在提交表单后出现某种错误（例如该人尚未确认他们不是机器人）我希望复选框保持选中状态，如果它之前被选中（当然，附加字段仍然是显示是否选中）。

我尝试了几种不同的方法：

1. 使用数据切换

2. 在复选框的单击功能上使用 JavaScript

3. 使用 jQuery 道具方法

4. 使用 jQuery :checked 选择器

（参考 3. 和 4. https://www.tutorialrepublic.com/faq/how-to-check-a-checkbox-is-checked-or-not-using-jquery.php）

所有方法出现的一个问题是，在提交有错误的表单后，即使选中了复选框，也不会显示其他字段。

      <div class="form-group">

            <label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additonal fields</label>

            <input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" <?php if (isset($_POST['additonalFields'])) echo 'checked="checked"'; ?>>

        </div>

        <div class="form-group collapse in row" id="fields">

            <div class="col-sm-6">

                <label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label>

                <input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1"

                    <?php

                    if ($_POST && ($suspect || $errors || !($response->success))) {

                        echo 'value="' . htmlentities($fieldOne) . '"';

                    }

                    ?>>

                </div>

            <div class="col-sm-6">

                <label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label>

                <input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2"

                    <?php

                    if ($_POST && ($suspect || $errors || !($response->success))) {

                        echo 'value="' . htmlentities($fieldTwo) . '"';

                    }

                    ?>>

            </div>

        </div><!-- form-group -->

上面的代码使用了数据切换。使用 JavaScript 或 jQuery 时，我使用的是 display: none; 并显示：flex；显示和隐藏附加字段。

Answer 1

我没有看到任何 jQuery，但我认为你的意思是$(function() {&nbsp; $("[name=additionalFields]").on("change",function() {&nbsp; &nbsp; $($(this).data("target")).toggle(this.checked);&nbsp; }).trigger("change"); // initialise on load})

Answer 2

在 html 重新加载时，如果单击复选框，您需要手动预定义 js 事件的作用。如果您的意思是使用 data-toggle 是使用引导手风琴，那么您需要将类“show”添加到事件数据目标以显示额外的输入字段。所以试试这个：<div class="form-group">&nbsp; &nbsp; <label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additonal fields</label>&nbsp; &nbsp; <input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" <?php if (isset($_POST['additonalFields'])) echo 'checked="checked"'; ?>></div><div class="form-group collapse in row <?php if (isset($_POST['additonalFields'])) echo 'show'; ?>" id="fields"><div class="col-sm-6">&nbsp; &nbsp; <label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label>&nbsp; &nbsp; <input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1"&nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; if ($_POST && ($suspect || $errors || !($response->success))) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo 'value="' . htmlentities($fieldOne) . '"';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ?>></div><div class="col-sm-6">&nbsp; &nbsp; <label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label>&nbsp; &nbsp; <input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2"&nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; if ($_POST && ($suspect || $errors || !($response->success))) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo 'value="' . htmlentities($fieldTwo) . '"';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ?>></div>