ஒரு check box-ஐ கிளிக் செய்யும் பொது எல்லா checkbox-ஐயும் select செய்வது எப்படி?

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<div class="container mt-5" >    
    <div class="row">
        <div class="col-md-3 offset-3">
            <label><input type="checkbox" class="select-all" checked=""> Select All Subjects</label> <br><br>
            <div class="qn1">
                <input type="checkbox" class="subject" checked=""> Micro Processor <br>
                <input type="checkbox" class="subject" checked=""> Operating System <br>
                <input type="checkbox" class="subject" checked=""> Data Structure <br>
                <input type="checkbox" class="subject" checked=""> Database <br>
                <input type="checkbox" class="subject" checked=""> Software Engineering <br>
                <input type="checkbox" class="subject" checked=""> Operation Research <br>
                <input type="checkbox" class="subject" checked=""> Statics <br>                
            </div>
        </div>        
    </div>
</div>
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
    $(function(){
       $('.select-all').on('click',function(){
          $('.subject').not(this).prop('checked',this.checked);
       }) ;
    });
</script>

முதலில் உள்ள checkbox-க்கு select-all என்ற class name பயன்படுத்தபடுகிறது. மற்ற எல்லா checkbox-க்கும் சுப்ஜெக்ட் என்ற class name பயன்படுத்தபடுகிறது. select-all என்ற checkbox-ஐ கிளிக் செய்யும் பொது மற்ற checkbox class name-ஐ கொண்டு checked ஆக உள்ளதா அல்லது unchecked-ஆக உள்ளதா என்று ஆய்வு செய்து விட்டு பிறகு checked-ஆக இருதால் எல்லா checkbox-ம் checked-ஆக இல்லையென்றால் uncheck ஆகிறது.

Note: இதில் jquery மற்றும் bootstrap.css பயனபடுத்த பட்டுள்ளது.