i have 4 check box

  <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%" >

i want if some one "check" a check box ajax send the id of that check box and {0,1} depend on if checked then 1 , if unchecked 0 to a php script via post asap its checked or unchecked

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

    print $id;
    print $state;
    }
    ?>

some thing like this.

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

how can i do this,

i have 4 check box

  <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%" >

i want if some one "check" a check box ajax send the id of that check box and {0,1} depend on if checked then 1 , if unchecked 0 to a php script via post asap its checked or unchecked

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

    print $id;
    print $state;
    }
    ?>

some thing like this.

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

how can i do this,

• javascript
• jquery
• ajax

5 Answers 5

Give a look at axiosjs Library. Its a lightweight Promise based HTTP client for the browser.

Features

• Make XMLHttpRequests from the browser
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Automatic transforms for JSON data
• Client side support for protecting against XSRF

Post Request

A post request could be made like this ...

<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);
});

no jquery:

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");
  }
}

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

regars

Save this as ajax.php in the root of your project. Run it and open the browser console to see the results:

<?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./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 } ?>

Result looks like so:

You can use onchange event in checkbox. Example :

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

And in function make an ajax call

Add a class in your checkboxes for example, class='something', then you may try something like following (Using jQuery as tagged in your question):

$(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) {

            // ...

        });


    });

});

You can retrieve the post data in php using $_POST['id'] and $_POST['value'].