Question

我想仅使用复选框向同一页面发送帖子请求。很像这个页面（link）。请注意桌面右侧的“show unofficial”。单击它后，它会向同一页面发送一个发布请求。我想在我的页面中使用相同的功能，但有两个复选框。但它没有重新加载页面，甚至没有一个复选框。我的代码的一部分：


    <form class="form-inline" role="form" action="" method="post">
    <input type="checkbox" class="form-control" name="official">OFFICIAL
    <input type="checkbox" class="form-control" name="unOfficial">UNOFFICIAL
    </form>

Answer 1

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

其他一些事情：

为了使您的HTML正确，您的输入标记需要一个结束斜杠，
与OFFICIAL相关的标签和与相关复选框相关联的UNOFFICIAL（使用ID）将更加用户友好，
因为复选框是关于同一类型的数据（官方和非官方状态），它们的名称应该相同，并且它们的值不同。

这是一个使用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>

Answer 2

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

<强> 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处理程序，以便在更改框时提交表单。很简单！

Answer 3

您可以使用onChange属性

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

仅使用复选框发布帖子请求

3 个答案: