How to get Multiple Checkbox data by form as root element in JQuery

I am new to JQuery. I am trying to get form data by using JQuery, first I get form element and then getting each input field value. All fields values are coming fine. but the multiple checkbox values are not getting.

Sorry for bad English. Thank you for your help in advance.

$(document).ready(function() {
  $('#form-data').on('submit', function(event) {

    var form = $(this);

    var name = form.find('input[name="name"]').val();
    var email = form.find('input[name="email"]').val();
    var phone = form.find('input[name="phone"]').val();
    var gender = form.find('input[name="gender"]').val();

    var subjects = form.find('input[name="subject"]').map(function() {
      return $(this).val();
    }).get();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="form-data">
  <label for="name">Enter Name</label>
  <input type="text" name="name" id="name"><br>
  <label for="email">Enter Email</label>
  <input type="email" name="email" id="email"><br>
  <label for="phone">Enter Phone</label>
  <input type="text" name="phone" id="phone"><br>
  <label for="gender" checked>male</label>
  <input type="radio" name="gender" value="male">
  <label for="gender">female</label>
  <input type="radio" name="gender" value="female"><br>
  <label for="subject">Subject</label><br>
  <input type="checkbox" name="subject[]" value="programing" checked>Programing
  <input type="checkbox" name="subject[]" value="Networking">Networking
  <input type="checkbox" name="subject[]" value="Database">Database
  <input type="checkbox" name="subject[]" value="web development">web development
  <input type="checkbox" name="subject[]" value="game development">game development
  <br>
  <input type="submit" id="submit" name="submit" value="submit">
</form>