Is there a way to implement specific CSS code based on user choices made in checkboxes? I need the CSS to change dynamically according to what the user selects.
For example:
- If Platform = Unix, Windows, and Network are selected, execute the CSS for Unix, Windows, and Network.
- If Platform = Windows and Network are selected, execute the CSS for Windows and Network.
This functionality will be utilized in a content editor within a SharePoint calendar list.
Please see the code snippet below:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function SubmitClicked(){
// JavaScript code to handle user selections and generate corresponding CSS
}
</script>
// CSS Rules for Unix
.ms-acal-color1 div, .ms-acal-color1 div a, .ms-acal-apanel-color1 SPAN {
display: none;
}
.ms-acal-color1{
display: none;
}
.ms-acal-selcolor1{
display: none;
}
.ms-acal-apanel-color1{
display: none;
}
// CSS Rules for Windows
.ms-acal-color2 div, .ms-acal-color2 div a, .ms-acal-apanel-color2 SPAN {
display: none;
}
.ms-acal-color2{
display: none;
}
.ms-acal-selcolor2{
display: none;
}
.ms-acal-apanel-color2{
display: none;
}
// CSS Rules for Network
.ms-acal-color3 div, .ms-acal-color3 div a, .ms-acal-apanel-color3 SPAN {
display: none;
}
.ms-acal-color3{
display: none;
}
.ms-acal-selcolor3{
display: none;
}
.ms-acal-apanel-color3{
display: none;
}
<div>Platform</div>
<input id="platform" checked type="checkbox" name="platform" value="Unix">Unix
<input id="platform" checked type="checkbox" name="platform" value="Windows">Windows
<input id="platform" checked type="checkbox" name="platform" value="Network">Network<br><br>
<br/>
<input type="button" onclick="SubmitClicked()" id="go" value="Submit">