In a certain page, there is a script that displays a div when a user selects an option. The script functions correctly, except for a scenario where if the user selects 'd' (which shows 'a', 'b', and 'c'), and then selects another option like 'a', it hides 'a' but keeps 'b' and 'c' visible. The issue arises when the user selects 'c' and then 'a', as the script should not hide 'a' in this case.
Below is the script code. The divs are identified by ids "one box", "two box", and "three box." To view the script fiddle, click here: https://jsfiddle.net/bcLuo0bg/8/. You can also check out a live version of the script here:
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("id")=="a"){
$(".one").toggle();
}
if($(this).attr("id")=="b"){
$(".two").toggle();
}
if($(this).attr("id")=="c"){
$(".three").toggle();
}
if($(this).attr("id")=="d"){
$(".box").toggle();
}
});
});
</script>