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

Question

这是我想要做的：我有一个表单，上面有一个复选框。选中该复选框时，我希望显示一些其他字段，未选中时我希望不显示这些字段。同样在提交表单后出现某种错误（例如该人尚未确认他们不是机器人）我希望复选框保持选中状态，如果它之前被选中（当然，附加字段仍然是显示是否选中）。我尝试了几种不同的方法：使用数据切换在复选框的单击功能上使用 JavaScript使用 jQuery 道具方法使用 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() {

  $("[name=additionalFields]").on("change",function() {

    $($(this).data("target")).toggle(this.checked);

  }).trigger("change"); // initialise on load

})

Answer 2

在 html 重新加载时，如果单击复选框，您需要手动预定义 js 事件的作用。如果您的意思是使用 data-toggle 是使用引导手风琴，那么您需要将类“show”添加到事件数据目标以显示额外的输入字段。所以试试这个：

<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 <?php if (isset($_POST['additonalFields'])) echo 'show'; ?>" 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>