[Deff]

<style>
.red {
  background-color:red;
}
.green {
  background-color:green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(document).ready(function(){
function testInp(sel) {
   var str=''
   $("input",sel).each(function(){
      var a = $(this).attr("data");
       if(!a) a='0'; str+=a;
   });
   if(str=='0100'){
       $("input",sel).eq(0).addClass("red");
       $("input",sel).eq(2).addClass("red");
       return;
   }
   if(str=='1100'&&$("input",sel).eq(0).hasClass("red")){
       $("input",sel).eq(0).removeAttr("class");
       return;
   }
   if(str=='1110'||str=='0000'){
       $("input",sel).removeAttr("class");
       return;
   }
   if(str=='1111'){
       $("input",sel).removeAttr("class");
       $("input",sel).addClass("green");
       return;
   }
}

  var wrp = $("#ul_wrp");
  $("li > input,wrp").on('change input',function(){
      if($(this).val().replace(/\s*/g,'')!='') {
         $(this).attr("data",1);
      } else $(this).removeAttr("data");
        testInp($(this).parent().parent());
  });

  });
  </script>
<div id=ul_wrp>
<ul>
<li><input type=text></li>
<li><input type=text></li>
<li><input type=text></li>
<li><input type=text></li>
</ul>
<ul>
<li><input type=text></li>
<li><input type=text></li>
<li><input type=text></li>
<li><input type=text></li>
</ul>
</div>