Question

我有4个复选框

  <input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default"  data-width="500%" >
  <input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default"  data-width="500%" >
  <input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default"  data-width="500%" >
  <input type="checkbox" name="4" id="4" data-toggle="toggle" data-onstyle="default"  data-width="500%" >

我想要一个人＆＃34;检查＆＃34;一个复选框ajax发送该复选框的id和{0,1}依赖于是否检查然后是1，如果未经检查0则通过post asap检查或取消选中该脚本

 <?php
    if($_POST['id'] && $_POST['state'])
    {
    $id = $_POST['id'];
    $state= $_POST['state'];

    print $id;
    print $state;
    }
    ?>

有点像这样。

if checbox1 == checked:
       post(checkbox1[id],1)
if(checkbox1== unchecked)
       post(checkbox1[id],0)

我该怎么做呢，

Answer 1

没有jquery：

＆＃13;

function task(e)
{
  
  if(e.target.checked)
  {
    ///do post request with 1 in parameter
    console.log("do post request with 1 in parameter");
  }
  else
  {
    ///do post request with 0 parameter
    console.log("do post request with 0 parameter");
  }
}

＆＃13;

<input type="checkbox" onclick="task(event);"/>

＆＃13;

regars

Answer 2

查看axiosjs图书馆。它是一个基于Promise的轻量级HTTP客户端，适用于浏览器。

功能

从浏览器制作XMLHttpRequests

支持Promise API

拦截请求和响应

转换请求和响应数据

自动转换JSON数据

客户端支持防范XSRF

发布请求

可以像这样发布帖子请求......

<input type="checkbox" name="describeyouraction" id="checkbox_1"> // Post requst to /toggle route axios.post('/toggle', { id: (document.getElementById("checkbox_1")).id, describeyouraction: (document.getElementById("checkbox_1")).name, }) .then((response) => { // do something if request is successfull ... }) .catch((error) => { console.log(error.response.data); });

Answer 3

您可以在复选框中使用onchange事件。示例：

<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default"
    data-width="500%"  onchange="some_function();">

并在函数中进行ajax调用

Answer 4

在您的复选框中添加一个类，例如class='something'，然后您可以尝试以下内容（在您的问题中使用jQuery标记）：

$(document).ready(function() {

    $('.something').on('change', function(e) {

        var id = $(this).attr('id');

        var value = $(this).is(':checked');

        $.post('url-here', {id:id, value:value}, function(response) {

            // ...

        });


    });

});

您可以使用php和$_POST['id']在$_POST['value']中检索帖子数据。

Answer 5

将此项保存为项目根目录中的ajax.php。运行它并打开浏览器控制台以查看结果：

<?php
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        var_dump($_POST['id']);
        var_dump($_POST['value']);
    } else {
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default"  data-width="500%" >
<input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default"  data-width="500%" >
<input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default"  data-width="500%" >
<input type="checkbox" name="4" id="4" data-toggle="toggle" data-onstyle="default"  data-width="500%" >

<script>
    $('input[type="checkbox"]').on('click', function(){

        var data = {};
        data.id = $(this).attr('id');
        data.value = $(this).is(':checked') ? 1 : 0;

        console.log(data);

        $.ajax({
            type: "POST",
            url: "/ajax.php",
            data: data,
        }).done(function(data) {
                console.log(data);
        });
    });

</script>

<?php } ?>

结果如下：

如何在复选框检查/取消选中事件上发送帖子请求

5 个答案: