While the code functions perfectly in JSFiddle, it seems to fail when I try to implement it in an HTML file. Despite my efforts, I am unable to pinpoint the source of the issue.
If you'd like to view the working version, here is the Fiddle demo.
Below is the snippet of code that isn't working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$('#Checkbox1, #Checkbox2').on('change', function () {
console.log();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
$('#circle_2').css('background-color', '#999');
} else {
$('#circle_2').css('background-color', 'transparent');
}
});
</script>
<style type="text/css">
#circle_2 {
border:solid 1px #333;
width: 100px;
height: 100px;
border-radius: 50%;
display:inline-block;
}
#circle {
border:solid 1px #333;
width: 100px;
height: 100px;
border-radius: 50%;
display:inline-block;
}
.circle_text{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:37px;
color:#333;
font-weight:bold;
}
</style>
</head>
<body>
<div id="position_1">
<div id="circle">
<p class="circle_text">
#1
</p>
</div>
</div>
<div id="position_2">
<div id="circle_2">
<p class="circle_text">
#2
</p>
</div>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
<input type="checkbox" value="1" id="Checkbox4" name="a4"/> Answer four <br/>
<input type="checkbox" value="1" id="Checkbox5" name="a5"/> Answer five <br/>
<input type="checkbox" value="1" id="Checkbox6" name="a6"/> Answer six <br/>
<input type="checkbox" value="1" id="Checkbox7" name="a7"/> Answer seven <br/>
<input type="checkbox" value="1" id="Checkbox8" name="a8"/> Answer eight<br/>
<input type="checkbox" value="1" id="Checkbox9" name="a9"/> Answer nine <br/>
<input type="checkbox" value="1" id="Checkbox10" name="a10"/> Answer ten <br/>
</body>
</html>
I have a feeling I may be overlooking something crucial for proper loading, but I haven't been able to identify it yet.