Javascript loop through checkbox and store value in object

I am new to JavaScript and am learning how to store values into a custom object. I am creating a program that will loop through a series of check boxes and once store the values of the checked boxes into an object.

I've stripped down my code to the most simple version

which can be viewed on JSfiddle here: http://ift.tt/2sCr26A

The HTML is:

<form>
  <div>
    <label>
      <input type="checkbox" name="style" value="classical" 
       onchange="add()">Classical</label>
    <label>
      <input type="checkbox" name="style" value="Rock" 
       onchange="add()">Rock</label>
    <label>
     <input type="checkbox" name="style" value="Jazz" 
     onchange="add()">Jazz</label>
    <label>
     <input type="checkbox" name="style" value="Folk" 
     onchange="add()">Folk</label>
  </div>
</form>

The JavaScript is:

var interest = {
    styles: "",
};

function add(){
    var sbox = document.getElementsByName("style");
    for (var i=0; i<sbox.length; i++){
    if (sbox[i].checked == true){
    interest.styles = sbox.value;   
        }
    }
 }

When I try to view the "interest" object in chrome developer mode it says that styles is undefined. Is there an issue with my looping through the check boxes or an issue with how I am storing the value of the checked boxes into the object?