<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>