Hide or display checkboxes if checked or not JavaScript

I got a problem with some checkboxes, I don't succeed to filter them according if they are checked or not.

The principle is simple. If I click on "All" all the checkboxes are displayed, but if I click on selected, I just want to see the checkboxes selected and hidde the ones unchecked.

Here is a snippet, please update it in your answer to let me see how it could be done.

Thanks a lot !

//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "Juny";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";

var target = new Array()
target[0] = "5";
target[1] = "8";

var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";

var j = "";
var t = document.getElementById('t');

// the loop is creating the checkboxes with name, value...
for (var i in choices) {
  //Name of checkboxes are their number so I convert the i into a string. 
  j = i.toString();

  val = j;
  //cap will be the value/text of choices[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  cap = choices[i];
  var text = document.createTextNode(cap);
  cb.type = 'checkbox';
  cbh.appendChild(cb);
  cb.name = cap;
  cb.value = val;
  label.appendChild(cb);
  label.appendChild(text);
  cbh.appendChild(label);
  cb.addEventListener('click', updateText)
  if(target.indexOf(i)>=0){
    cb.checked =true ;
  }

}
updateText();
function updateText() {
  t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '')
}

                      * {
                        box-sizing: border-box;
                        }
                        #data {
                            padding:5px;
                                width:100vw;
                        }
                        .multiselect {
                                overflow: visible;
                                padding:0;
                                padding-left:1px;
                                border:none;
                                background-color:#eee;
                                width:100vw;
                                white-space: normal;
                                height:200px;
                        }
                        .checkboxes {
                                height:100px;
                                width:100px;
                                border:1px solid #000;
                                background-color:white;
                                margin-left:-1px;
                                display:inline-block;
                        }
      
            label {
                                display: inline-block;
                                border: 1px grey solid;
                                padding:5px;
                        }

    <span onclick="">All</span> | <span onclick="">Selected</span>
        <form>
        <div id="data">
                <div class="multiselect">
                        <div id="c_b">
                                <div id="checkboxes">
                                </div>
                        </div>
                </div>
        </div>
</form>
<textarea id="t"></textarea>