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

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

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

使用数据切换

使用复选框的JavaScript单击功能

使用jqueryprop方法

使用jQuery:checked选择器

（参考第3条和第4条。）

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

        <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 -->

显示附加字段
>
字段2
>

---

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

我没有看到任何jQuery，但我想您的意思是

$(function() {
  $("[name=additionalFields]").on("change",function() {
    $($(this).data("target")).toggle(this.checked);
  }).trigger("change"); // initialise on load
})

---

在重新加载html时，如果单击复选框，则需要手动预定义js事件所做的操作。 若您的意思是使用数据切换就是使用引导accordion，那个么您需要将类“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>

显示附加字段