multiple Checkbox change toggle classes

I need to filter multiple checkbox and hide or show elements.I"m using jQuery and here are three conditions:

1. Div has class "flag" and checked=true - show 1st element. If checked=false hide 1st element.

2. Div hasn`t class "flag" and checked=true - show 2nd element. If checked=false hide 2nd element.

3. Both (or more )divs, with class "flag" and without class "flag" checked=true - show 1st and 2nd elements, if checked=false hide 1st and 2nd elements.

To more understand what i want to do please run snippet.

There is working example but only for each checkbox not both or more.

Hove can i make it possible to hide\show required elements based on class flag ?

Or maybe threre are other way to do this?

Thanks in advance

//this for all select all checkbox
$('.select-all').on('click',  function() {
var parentEl=$(this).parent().parent();
var childEl=$(parentEl).children().toggleClass('hidden');
$('.ch').each(function() {
$(this).prop('checked',true);
 });
var flag=document.getElementsByClassName('flag');
var flagL=$(flag).length;
var parElId=$(this).parent().parent().attr('id');
var chL=$('.ch:checked').length;
if(flagL==0){
$('.all-msg-flag-remove').addClass('hidden');   
}else{
$('.all-msg-flag-remove').removeClass('hidden');        
}
if(flagL==chL){
$('.all-msg-flag').addClass('hidden');  
}else{
$('.all-msg-flag').removeClass('hidden');       
}
});
$('.unselect-all').on('click',  function() {
var parentEl=$(this).parent().parent();
var childEl=$(parentEl).children().toggleClass('hidden');
$('.ch').each(function() {
$(this).prop('checked',false);
 });
}); 
// this is my code for each one
 $('.ch').on('click',  function(e) {
        e.stopPropagation();
$('.answersRowHead').children().addClass('hidden');
$('.check-all').removeClass('hidden');
         var parElId=$(this).parent().parent().attr('id'); 
         var parEl=document.getElementById(parElId);
 if($(parEl).hasClass('flag')){
        if($(this).prop("checked") == true){
        $('.all-msg-flag').addClass('hidden');  
        } else{
        $('.all-msg-flag').removeClass('hidden');       
        }
        
  }else{
        if($(this).prop("checked") == true){
        $('.all-msg-flag-remove').addClass('hidden');   
        } else{
        $('.all-msg-flag-remove').removeClass('hidden');        
        } 
  }
 
var totalCh=$('.ch:checked').size();
if(totalCh<1){
$('.answersRowHead').children().removeClass('hidden');
$('.check-all').addClass('hidden');
}
 });

.answersRow{
  width: 80%;
  margin: 0 auto;
  border: 1px solid silver;
  position: relative;
  z-index: 1;
  cursor: pointer;
  height:50px;
}
.answersRowHead {
  width: 80%;
  margin: 0 auto;
  border: 1px solid black;
}
.crl:after{
        clear: both;
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.w5{
        float:left;
        width:5%;
}
.w10{
        float:left;
width:10%;      
}
.w15{
        float:left;
width:15%;      
}
.w50{
        float:left;
        width:50%;
}
.hidden{display:none}
.select-all{display:inline-block;width:15px;height:15px;background:black;margin:0 5px 0 5px;}
.unselect-all{display:inline-block;width:15px;height:15px;background:red;margin:0 5px 0 5px;}
.flag{border:1px solid red}
.all-msg-trash,.all-msg-flag,.all-msg-flag-remove{background:silver;padding:0 3px;margin:0 10px;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="answersRowHead crl">
  <div class="w5"><span class="select-all"></span></div>
  <div class="w15">user</div>
  <div class="w50">ads</div>
  <div class="w10">flag</div>
  <div class="check-all hidden">
    <span class="unselect-all"></span>
    <span class="all-msg-trash"> msg trash</span>
    <span class="all-msg-flag">msg add flag</span>
    <span class="all-msg-flag-remove">msg remove flag</span>
  </div>
</div>
<div class="answersRow crl" id='1'>
 <div class="w10"><input class="ch" type="checkbox" val='1' /></div>
 <div class="w15">user1</div>
  <div class="w50">ads1</div>
  <div class="w10">no flag</div>

</div>
<div class="answersRow flag crl" id='2'>
 <div class="w10"><input class="ch" type="checkbox" val='2' /></div>
 <div class="w15">user2</div>
  <div class="w50">ads2</div>
  <div class="w10">has flag</div>

</div>
<div class="answersRow crl" id='3'>
 <div class="w10"><input class="ch" type="checkbox" val='3' /></div>
 <div class="w15">user3</div>
  <div class="w50">ads3</div>
  <div class="w10">no flag</div>
 
</div>
<div class="answersRow flag crl" id='4'>
 <div class="w10"><input class="ch" type="checkbox" val='4' /></div>
 <div class="w15">user4</div>
  <div class="w50">ads4</div>
  <div class="w10">has flag</div>
 </div>
 <div class="answersRow crl" id='5'>
 <div class="w10"><input class="ch" type="checkbox" val='5' /></div>
 <div class="w15">user4</div>
  <div class="w50">ads4</div>
  <div class="w10">no flag</div>
 </div>