JSFiddle - React, Tailwind, and code Playground
HTML
<h1>VirtualDJ help tool for the <code>ignoreDrives</code> setting.</h1>
<h2>Select drives to ignore (note: Windows only)</h2>
<hr>
<div class=col>
<div>
<div><label><input type=checkbox> a</label></div>
<div><label><input type=checkbox> b</label></div>
<div><label><input type=checkbox> c</label></div>
<div><label><input type=checkbox> d</label></div>
<div><label><input type=checkbox> e</label></div>
<div><label><input type=checkbox> f</label></div>
<div><label><input type=checkbox> g</label></div>
<div><label><input type=checkbox> h</label></div>
<div><label><input type=checkbox> i</label></div>
</div>
<div>
<div><label><input type=checkbox> j</label></div>
<div><label><input type=checkbox> k</label></div>
<div><label><input type=checkbox> l</label></div>
<div><label><input type=checkbox> m</label></div>
<div><label><input type=checkbox> n</label></div>
<div><label><input type=checkbox> o</label></div>
<div><label><input type=checkbox> p</label></div>
<div><label><input type=checkbox> q</label></div>
<div><label><input type=checkbox> r</label></div>
</div>
<div>
<div><label><input type=checkbox> s</label></div>
<div><label><input type=checkbox> t</label></div>
<div><label><input type=checkbox> u</label></div>
<div><label><input type=checkbox> v</label></div>
<div><label><input type=checkbox> w</label></div>
<div><label><input type=checkbox> x</label></div>
<div><label><input type=checkbox> y</label></div>
<div><label><input type=checkbox> z</label></div>
</div>
</div>
<hr>
<div>Copy and paste this value into the ignoreDrives field: <span>0</span></div>
<hr>
<button>Clear</button>
<p>By Pete Van Polaris 2019. Public Domain. Feel free to copy and modify for other OSes.</p>
CSS
body {font: 16px sans-serif}
label {text-transform: uppercase}
span {font: bold 18px sans-serif}
hr {border-top:1px solid #ccc;border-bottom:none}
.col {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
JavaScript
// For VirtualDJ - by Pete Van Polaris 2019. Public Domain.
const boxes = document.querySelectorAll('input');
boxes.forEach(box => {box.oninput = update});
function update() {
let v = 0;
boxes.forEach((box, i) => {if (box.checked) v |= Math.pow(2, i)});
document.querySelector('span').innerText = v;
}
document.querySelector('button').onclick = () => {
boxes.forEach(box => box.checked = false);
document.querySelector('span').innerText = '0';
};