Not able to fetch the values from checkboxes

Question

I have a form that contains input, dropdown and 3 checkboxes. I need to fetch the values from this form and save the data at the backend.

The values from input and dropdown are coming but I am not able to fetch the value of checkboxes.

I have made the checkbox look like a label, so they look like this

After submitting the form, the value of checkbox always comes as "on" whereas I want that it should come as true or false depending on if the user has checked it or not

Form

<form  id="search_form" method="post" >
  <input id="fullname" name="fullname" type="text">
  <select name="location" id="location">
    <option value="">Location</option>
    <option value="A">A</option>
    <option value="B">B</option>
  </select>                     

  <input type="checkbox" name="XID_name" value=1 id="XID"/>
  <label class="a" for="XID">X </label>
  <input type="checkbox" name="YID_name"  id="YID" /> 
  <label class="a" for="YID">Y </label>
  <input type="checkbox" name="ZID_name" id="ZID" />
  <label class="a" for="ZID">Z </label>

  <button type="submit" id="save" >SEARCH</button>
</form>

Script

<script type="text/javascript">
  $("#search_form").submit(function(e) {
    e.preventDefault();
    var fullname = $("#fullname").val();
    var location = $("#location").val();
    var XID = $("#XID").val();
    var YID = $("#YID").val();
    var ZID = $("#ZID").val();

    $.ajax({
      type: "POST",
      url: "ABC/DEF",
      data: { fullname:fullname, location:location,  XID:XID, YID:YID, ZID:ZID }, 
      success: function(data){
        console.log(data)
    }
  });
})
</script>

Backend

<?php
    $data = array(
      'fullname' => $this->input->post('fullname'),
      'location' => $this->input->post('location'),
      'XID' => $this->input->post('XID'),
      'YID'=>$this->input->post('YID'),         
      'ZID' => $this->input->post('ZID'),
    );

echo "<pre>";
print_r($data);
echo "</pre>";
?>

Resulting array

Array
(
    [fullname] => 
    [location] => 
    [XID] => on
    [YID] => on
    [ZID] => on
)

Can anyone please tell how to resolve this issue?

Answer 1

In jquery you have to check your check box is checked or not. According to it you have to pass the value

var XID = $("#XID").prop('checked');
var YID = $("#YID").prop('checked');
var ZID = $("#ZID").prop('checked');