How to make a XUL Listcell checkbox selectable

my project

I'm working on the tool in the image above. I'm trying to create a checkbox for a listcell that I can select much like:

 listitem.setAttribute("type","checkbox");

The problem is that whenever I create a listcell and add the following line

 listcell.setAttribute("type","checkbox");

before appending the listcell to my listitem, the checkbox is not selectable but instead I see the blue bar as in the image above.

How can I create a checkbox for a listcell?

Here is my js code:

   createListItem: function(tag){
    var tag_element = this.win.document.createElement('listitem');
    var cell = this.win.document.createElement('listcell');
    cell.setAttribute("type","checkbox");
    cell.setAttribute("label",tag._get('name'));
    tag_element.setAttribute("id", tag._get('id')); 
    tag_element.setAttribute("label", tag._get('name'));
    tag_element.appendChild(cell);

    return tag_element;