javascript - 选中复选框时提交表单

Question

选中复选框时有没有办法提交表单？

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3">3</input>
    <input type ="checkbox" name="cBox[]" value = "4">4</input>
    <input type ="checkbox" name="cBox[]" value = "5">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

<?php
    if(isset($_GET['submit'])){
        include 'displayResults.php';
    }
?>

这就是我目前所拥有的，但是当用户选中或取消选中复选框时，我想提交没有提交按钮的表单。有什么帮助吗？

score 95 · Accepted Answer

onChange通过向输入标签添加属性来使用 JavaScript

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

score 24 · Accepted Answer

是的，这是可能的。

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3" onchange="document.getElementById('formName').submit()">3</input>
    <input type ="checkbox" name="cBox[]" value = "4" onchange="document.getElementById('formName').submit()">4</input>
    <input type ="checkbox" name="cBox[]" value = "5" onchange="document.getElementById('formName').submit()">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

通过添加onchange="document.getElementById('formName').submit()"到每个复选框，您将在任何时候更改复选框时提交。

如果你对 jQuery 没问题，它会更容易（而且不引人注目）：

$(document).ready(function(){
    $("#formname").on("change", "input:checkbox", function(){
        $("#formname").submit();
    });
});

对于表单中的任意数量的复选框，当“更改”事件发生时，表单就会被提交。如果您通过该方法动态创建更多复选框，这甚至会起作用.on()。

score 4 · Accepted Answer

我已经搞砸了大约四个小时，并决定与您分享。

您可以通过单击复选框来提交表单，但奇怪的是，在 php 中检查提交时，您希望在选中或取消选中复选框时设置表单。但事实并非如此。只有在您实际选中复选框时才会设置表单，如果您取消选中它，它将不会被设置。复选框输入类型末尾的“选中”一词将导致复选框显示已选中，因此如果您的字段被选中，则必须像下面的示例一样反映这一点。当它被取消选中时，php 会更新字段状态，这将导致选中的单词消失。

您的 HTML 应如下所示：

<form method='post' action='#'>
<input type='checkbox' name='checkbox' onChange='submit();'
<?php if($page->checkbox_state == 1) { echo 'checked' }; ?>>
</form>

和PHP：

if(isset($_POST['checkbox'])) {
   // the checkbox has just been checked 
   // save the new state of the checkbox somewhere
   $page->checkbox_state == 1;
} else {
   // the checkbox has just been unchecked
   // if you have another form ont the page which uses than you should
   // make sure that is not the one thats causing the page to handle in input
   // otherwise the submission of the other form will uncheck your checkbox
   // so this this line is optional:
      if(!isset($_POST['submit'])) {
          $page->checkbox_state == 0;
      }
}

score 3 · Accepted Answer

$(document).ready(
    function()
    {
        $("input:checkbox").change(
            function()
            {
                if( $(this).is(":checked") )
                {
                    $("#formName").submit();
                }
            }
        )
    }
);

虽然最好为每个复选框添加类并执行

$(".checkbox_class").change();

这样您就可以选择哪些复选框提交表单，而不是全部提交。

score 1 · Accepted Answer

您可以通过 JavaScript 中的简单方法单击复选框来提交表单。在表单标签或输入属性中添加以下属性：

    onchange="this.form.submit()"

例子：

<form>
      <div>
           <input type="checkbox">
      </div>
</form>

score 0 · Accepted Answer

选中复选框后提交表单

$(document).ready(function () {   
$("#yoursubmitbuttonid").click(function(){           
                if( $(".yourcheckboxclass").is(":checked") )
                {
                    $("#yourformId").submit();

                }else{
                    alert("Please select !!!");
                    return false;
                }
                return false;
            }); 
});

javascript - 选中复选框时提交表单

6 回答 6

Related

Reference