Not able to fetch the values from checkboxes

Issue

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?

Solution

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

Answered By - B. Desai