仅使用复选框进行发布请求答案

【问题标题】：Making a post request with only checkboxes仅使用复选框进行发布请求
【发布时间】：2014-09-15 03:49:20
【问题描述】：

我想只用复选框向同一页面发出发布请求。非常喜欢这个页面 (link)。注意桌面右侧的“show unofficial”。单击它后，它会向同一页面发出发布请求。我想在我的页面中使用相同的功能，但有两个复选框。但它不会重新加载页面，即使只有一个复选框。我的代码的一部分：

【问题讨论】：

复选框默认不会在点击时提交。你在你的项目中使用 jQuery 吗？所以我们可以提出一个合适的解决方案。
是的，我正在使用 jquery 脚本

标签： html forms checkbox

【解决方案1】：

您实际上可以查看页面的源代码并执行相同的操作。

HTML

<form action="" method="post" class="toggle-show-unofficial" style="margin-top: 0.5em;"><input type='hidden' name='csrf_token' value='5680chchb2e97fg076f5f9gf5efggbgb'/>
    <input type="hidden" name="action" value="toggleShowUnofficial"/>
    <input type="hidden" name="newShowUnofficialValue" value="true"/>
    <input name="showUnofficial" id="showUnofficial" type="checkbox" />
     <label for="showUnofficial" style="position: relative; bottom: 0.4em;">show unofficial</label>
</form>

Javascript

$(".toggle-show-unofficial input[name='showUnofficial']").change(function() {
    $(".toggle-show-unofficial").submit();
});

您可以看到他们为change 事件设置了一个jQuery 处理程序，以便在更改框时提交表单。很简单！

【讨论】：

【解决方案2】：

无论如何，您都需要一些 javascript 来实现这一点。您需要在复选框上设置一个 onchange 事件，这将触发表单的提交。

其他几件事：

为了使您的 HTML 正确，您的输入标签需要一个右斜杠，
将官方和非官方链接到相关复选框（使用 ID）周围的标签将更加用户友好，
因为checkbox是同一种数据（官方和非官方状态），所以名字应该一样，值不一样。

这里是一个使用 JQuery 的例子：


    <form id="myform" class="form-inline" role="form" action="" method="post">
        <input type="checkbox" class="form-control" value="official" name="some-name" id="checkbox-official" />
        <label for="checkbox-official">OFFICIAL</label>
    </form>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#myform input[type="checkbox"].form-control').change(function(){
            $('#myform').submit();
        });
    });
    </script>

【讨论】：

谢谢padawin。有用。不，这两个复选框也可以被选中，所以它们有不同的名称。

【解决方案3】：

你可以使用 onChange 属性

<input type="checkbox" onChange="this.form.submit()">

【讨论】：