<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
label {
margin:0px 2px 4px 2px;
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
.map-box {
padding: 20px;
background-color:red;
}
.map-box-active {
padding: 20px;
background-color:green;
}
</style>
</head>
<body>
<form action="" method="get">
<label title="REQ13" id="REQ13"><input type="checkbox" value="checkbox" onchange="statecheck('REQ13')" />AL</label>
<label title="REQ14" id="REQ14"><input type="checkbox" value="checkbox" onchange="statecheck('REQ14')" />AK</label>
<label title="REQ15" id="REQ15"><input type="checkbox" value="checkbox" onchange="statecheck('REQ15')" />AS</label>
</form>
<script>
function statecheck(layer) {
var myLayer = document.getElementById(layer);
var input = myLayer.childNodes[0];
if(input.checked == true){
myLayer.classList.toggle("map-box-active");
} else {
myLayer.classList.toggle("map-box");
};
}
</script>
</body>
</html>
