my jquery code does not find the proper html tag
I have below code which display a checkbox and two <p> tags with id of "dd1" and "dd2". I want dd1 to hide when the checkbox is checked, and dd2 to hide when the checkbox is unchecked. I added alert() statement to make sure the prop of checkbox is correct, but, as it turns out, when it is checked, and the alert() shows true, the dd2 is hidden, rather than dd1 was hidden. And when I click again, alert shows it is now false, but it does not do anything. Could you please help me point out my error? Thanks.
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$("#foo").on("click", function() {
var bulean = $(this).prop("checked");
if (bulean == 'true'){
alert(bulean);
$("#dd1").hide();
}
else{
alert(bulean);
$("#dd2").hide();
}
});
}
);
</script>
</head>
<body>
<input type="checkbox" id="foo" />
<h3>try to make below text disappear.</h3>
<p id="dd1">Click me away! dd1 said.</p>
<p id="dd2">Click me too! dd2 said</p>
</body>
</html>