JSFiddle - React, Tailwind, and code Playground

HTML

<select id="itemsList" multiple="true" size="3" onclick="doTheMagic(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="audi">Audi</option>
</select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems(this)" />Select all

JavaScript

var record = [];

var selectAllItems = function (target) {
    var itemsList = document.getElementById('itemsList');
    for (var i = 0; i < itemsList.options.length; i++) {
        itemsList.options[i].selected = target.checked ? 1 : 0;
        record[i] = itemsList.options[i].selected;
    }
}

var doTheMagic = function (target) {
    record[target.selectedIndex] = !record[target.selectedIndex];
    rebuildOptions();

}

var rebuildOptions = function () {
    var itemsList = document.getElementById('itemsList');
    for (var i = 0; i < record.length; i++) {
        itemsList.options[i].selected = record[i];
    }

}