Conditional formula or other solution SharePoint - sharepoint

Question

I have a SharePoint list that has a checkbox field with 21 answer options. The user could select anywhere from 1 to 21 of those answers. I need to figure out a way for SharePoint to require an accompanying question and drop down answer for each orginal checkbox selected.
For example:
Field Name: Color
Checkbox Selections: Green, Blue, Red, Yellow, Pink, Purple
Selection Was/Boxes Checked next to: Green, Blue, and Pink
I then need SharePoint to ask the additional question of: Color Shade: Light, Dark, Really Dark, Neon in another checkbox option.
I think that I will have to have fields such as Green Color Shade, Blue Color Shade, etc, but I only want those fields to show in the form if the color is selected in the original question.
Thank you in advance for any help and open to other solutions for the same result.

Answer 1

We can show/hide the field using jQuery code, add some jQuery code into new/edit form page to achieve it.
Example:
<script src="//code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
HideOrShowFields($("h3.ms-standardheader:contains('Color Checkbox Selections')").closest("tr").find("select").val());
$("h3.ms-standardheader:contains('Color Checkbox Selections')").closest("tr").find("select").change(function(){
HideOrShowFields($(this).val());
});
});
function HideOrShowFields(value){
var array=["Green","Blue","Red"];
for(var i=0;i<array.length;i++){
if(array[i]==value){
$("h3.ms-standardheader:contains('"+array[i]+" Color Shade')").closest("tr").show();
}else{
$("h3.ms-standardheader:contains('"+array[i]+" Color Shade')").closest("tr").hide();
}
}
}
</script>