Can not get data attribute value from object in loop

I have multiple checkbox enclosed with container div

<div id="container">
<input type="checkbox" data-value="Apple" onclick="populateParent()" value="1"/>
<input type="checkbox" data-value="Orange" onclick="populateParent()" value="2"/>
...
</div>

Whenever user select the checkbox, I want to populate another select box with id and data-value. Here is the select box

<select name="parent_company" id="merge_parent"></select>

In populateParent function I can get the checkbox id, name, value etc. But I can't get the html5 data attribute. Here is the code:

function populateParent(){
var selectedCheckbox = $('#container').find('input[type=checkbox]:checked').map(function() {
            return this;
   }).get();

 for(var i=0; i< selectedCheckbox.length; i++){
   var obj = selectedCheckbox[i];
  var option=
     '<option value="'+obj.id+'">'+obj.data('value')+'</option>';
                                        |- This throws Undefined error.

         output+=option;
      }
     $('#merge_parent').html(output);
    }

Instead of obj.data('value'), I have also tried using obj.data-value or obj.attr('data-value'). But, none of these are working.