JSFiddle - React, Tailwind, and code Playground

by Amandeep Singh

HTML

<fieldset data-role="collapsible">
    <legend>Pick one</legend>
    <div data-role="controlgroup" id="ZIBI" align="right" >
    </div>
</fieldset>
<input type="button" id="check" value="Toggle" />
<input type="checkbox" id="all" value="Toggle" />

JavaScript

myArray1 = new Array(
           "1","2","3","4","5","6"
           );

 $("#ZIBI").html('');
           for (var i = 0; i < myArray1.length; i++) {
               row = myArray1[i];
               $("#ZIBI").append(
                   '<label for=' + row + '>' + row + '</label>' +
                   '<input type="checkbox" name="favcolor" id=' + row + ' value=' + row + '>');
           }
           $('#ZIBI').trigger('create');

$('#check').on('click', function() {
        $('#ZIBI').find('input[type=checkbox]').trigger('click'); 
});

$('#all').on('click', function() {
    if(this.checked) {
        $('#ZIBI').find('input[type=checkbox]').prop('checked', true); 
    } else {
        $('#ZIBI').find('input[type=checkbox]').prop('checked', false); 
    }
});