What modifications do I need to make in JTML and Javascript?
var opac;
function checkfun()
{
opac=(Array.from(document.querySelectorAll('input[type="checkbox"]'))
.filter((checkbox)=>checkbox.checked)
.map((checkbox)=>checkbox.value));
}body
{
display: flex;
font-family: "Montserrat", sans-serif;
}
.form
{
width: 15vw;
height: 500px;
border: 1px solid black;
}
.mySidebar
{
height: 500px;
display: block;
}
.mySidebar ul
{
font-size: large;
font-weight: bold;
color: rgb(110, 110, 110);
}
.mySidebar li
{
font-size: medium;
font-weight: normal;
color: black;
list-style: none;
}
/*--------------------------------------------------------------*/
.color-block
{
margin-left: 30px;
width: 70vw;
display: block;
}
.col-sm-4
{
margin-bottom: 30px;
}
.data-grid
{
border: 1px solid rgb(189, 189, 189);
border-radius: 5px;
max-height: auto;
display: block;
}
/*-----------------colors-----------------*/
.red{
background: red;
widows: 100%;
height: 400px;
}
.blue{
background: blue;
widows: 100%;
height: 400px;
}
.green{
background: green;
widows: 100%;
height: 400px;
}
.yellow{
background: yellow;
widows: 100%;
height: 400px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<!-- Sidebar/menu -->
<div class="form">
<div class="mySidebar">
<div >
<ul >Colours
<li><input type="checkbox" name="a" value="Red" onclick="checkfun()"> Red</li>
<li><input type="checkbox" name="a" value="Blue" onclick="checkfun()"> Blue</li>
<li><input type="checkbox" name="a" value="Green" onclick="checkfun()"> Green</li>
<li><input type="checkbox" name="a" value="Yellow" onclick="checkfun()"> Yellow</li>
</ul>
<ul>Color Value
<li><input type="checkbox" name="a" value="5" onclick="checkfun()"> 5</li>
<li><input type="checkbox" name="a" value="6" onclick="checkfun()"> 6</li>
</ul>
</div>
</div>
</div>
<!-- Sidebar/menu -->
<div class="color-block">
<div class="row">
<div class="col-sm-4">
<div class="data-grid">
<div class="red">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="data-grid">
<div class="blue">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="data-grid">
<div class="green">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="data-grid">
<div class="yellow">
</div>
</div>
</div>
</div>
</div>
</body>
</html>This is the link to a codepen: CodePen
I am looking to implement a functionality where when I check a checkbox, the corresponding color grid should be opaque while others remain transparent. For example, if I select Red, only the red color grid should be opaque and the rest transparent.
Please provide guidance on this.