JSFiddle - React, Tailwind, and code Playground

HTML

<select name="filter" id="priority_filter" ^>
    <option value="all">All</option>
    <option value="opt">Optional</option>
    <option value="mand">Mandatory</option>
    <option value="ess">Essential</option>
    <option value="custom">Custom</option>
</select>
<div id="checks">
    <input type="checkbox" id="opt_box">Optional
    <input type="checkbox" id="mand_box" checked="checked">Mandatory
    <input type="checkbox" id="ess_box">Essential</div>

JavaScript

var $checkboxes = $(':checkbox', '#checks');

$('#priority_filter').on('change', function () {
    setImportance(this.value);
});

$('#checks').on('change', ':checkbox', function() {
    console.log(this);
});

var setImportance = function (val) {
    switch (val) {
        case 'all':
            $checkboxes.prop('checked', true).trigger('change');
            break;
        case 'custom':
            // some custom stuff
            break;
        default:
            $checkboxes.prop('checked', false)
                .filter('#' + val + '_box')
                .prop('checked', true)
                .end().trigger('change');
            break;
    }
}