Your Cart

Get Amazing Offers on Scripts

Get UX Support

checked checkbox changes background color

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

Leave a Reply
Fast Download

Instant access to your digital products right after purchase.

Custom Softwares

Completely build by Tutorialslides

Latest Sofware Updates

Offered in the country of usage

100% Secure Checkout

PayPal / MasterCard / Visa