HTML Form Parsing with Checkboxes

I am a beginner in HTML and Javscript and I have a problem converting my HTML form to JSON.

Here is my HTML

<div id="connection_details">
  <label for="Orange Juice">IP Address:</label><br>
  <input type="text" name="Orange Juice" id="orange_juice" value=""/><br /><br>
  <label for="Apple Juice">Output Directory:</label><br>
  <input type="text" name="Apple Juice" id="apple_juice" value=""/><br /><br>
  <input type="checkbox" id="glass_size" name="Large" value="300 mL"/>
  <label for="Large">Large</label><br>
  <input type="checkbox" id="glass_size" name="Medium" value="200mL"/>
  <label for="Medium">Medium</label><br>
  <input type="checkbox" id="glass_size" name="Small" value="100mL"/>
  <label for="Small">Small</label><br>
  <input type="submit" id="open" value="Run!" />
</div>

I want to create JSON with a key:value pair of id:value of the form data. Im using the

var formData = JSON.stringify($("#connection_details").serializeArray()); 

command but getting no luck as my JSON array is blank.

How can i write my code so my JSON looks like this:

{
"orange_juice": ["Input"],    
"apple_juice": ["Input"] ,
"Large": "300mL",
"Medium": "200 mL",
"Small": "100 mL"
}