JSFiddle - React, Tailwind, and code Playground

by _abl

HTML

<div id="span_descr">
    <div>
        <span>Select all</span>
        <span>Deselect all</span>
    </div>
</div>
<div>
    <input type="checkbox" id="old_a"/> A <br/>
    <input type="checkbox" id="old_b"/> B <br/>
    <input type="checkbox" id="old_c"/> C <br/>
    <input type="checkbox" id="old_d"/> D <br/>
</div>

CSS

#span_descr > div > span{
    background-color:#e0e0e0;
    padding:5px;
    margin:5px;
    display:inline-block;
}

JavaScript

//Function called by sigle element or multiple times (see below)
$('[id^=old_]').change(function(){
    var check = $(this).prop('checked') ? true : false;

    if(check){
         onSelected(this);
    }else{
        var reprise = confirm('Are you sure?');
        if(reprise){
            onDeselected(this);
        }else{
            $(this).prop('checked', true);  
        }
    }
});

function onSelected(checkbox){
    /* stuff here */
    console.log("selected");
}

function onDeselected(checkbox){
    /*  do stuff */
    console.log("deselected");
}

//Function called on "select all/deselect all"
$('#span_descr > div:last-child').on('click', 'span:first-child', function(){
     $('[id^=old_]:not(:checked)').click();
}).on('click', 'span:last-child', function(){
    if(confirm('Are you sure?')){
        var checked = $('[id^=old_]:checked');
        checked.prop('checked', false);
        checked.each(function(index, elem){
            onDeselected(elem);
        });
    }
});