JSFiddle - React, Tailwind, and code Playground

HTML

<form>
	<select id="select" multiple>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<input type="checkbox" id="toggle" />
</form>

JavaScript

window.onload = function () {
	var select = document.getElementById('select'),
		toggle = document.getElementById('toggle'),
		options = select.options,
		selections = [],
		selectOption = function (e) {		
			var n,
				target = e.target || e.srcElement,
				currentValue = target.value;
			for (n = 0; n < options.length; n++) {
				if (currentValue === options[n].value) { // or options[n].text, if values are not defined
					selections[n] = !selections[n];
				}
				options[n].selected = selections[n];
			}
		},
		toggleAll = function () {
			var n, bool = this.checked;
			for (n = 0; n < options.length; n++) {
				options[n].selected = bool;
				selections[n] = bool;
			}
		},
		n;
	for (n = 0; n < options.length; n++) {
		selections.push(options[n].selected);
	}
	if (select.addEventListener) {
		select.addEventListener('click', selectOption);
		toggle.addEventListener('click', toggleAll);
	} else {
		select.attachEvent('onclick', selectOption);
		toggle.attachEvent('onclick', toggleAll);
	}
}