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

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; 和显示：弹性；显示和隐藏附加字段。

标签： javascriptphpjqueryhtml

Answer 1

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

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