it's better if you define a class with a different colour, then you switch the class
$('#checkbox').click(function(){
var chk = $(this);
$('p').toggleClass('selected', chk.attr('checked'));
})
in this way your code it's cleaner because you don't have to specify all css properties (let's say you want to add a border, a text style or other...) but you just switch a class
$('#checkbox').change(function(){
var c = this.checked ? '#f00' : '#09f';
$('p').css('color', c);
});
--
On using this.checked Andy E has done a great write-up on how we tend to overuse jQuery: Utilizing the awesome power of jQuery to access properties of an element. The article specifically treats the use of .attr("id") but in the case that #checkboxis an <input type="checkbox" /> element the issue is the same for $(...).attr('checked') (or even $(...).is(':checked')) vs. this.checked.
I found out a crazy solution for dealing with this issue of checkbox not checked or checked
here is my algorithm...
create a global variable lets say var check_holder
check_holder has 3 states
undefined state
0 state
1 state
If the checkbox is clicked,
$(document).on("click","#check",function(){
if(typeof(check_holder)=="undefined"){
//this means that it is the first time and the check is going to be checked
//do something
check_holder=1; //indicates that the is checked,it is in checked state
}
else if(check_holder==1){
//do something when the check is going to be unchecked
check_holder=0; //it means that it is not checked,it is in unchecked state
}
else if(check_holder==0){
//do something when the check is going to be checked
check_holder=1;//indicates that it is in a checked state
}
});
The code above can be used in many situation to find out if a checkbox has been checked or not checked. The concept behind it is to save the checkbox states in a variable, ie when it is on,off.
i Hope the logic can be used to solve your problem.
<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
alert("checked");
}
else if($(this).prop("checked") == false){
alert("Checkbox is unchecked.");
}
});
</script>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
$('#checkbox').click(function(e){
if(e.target.checked) {
// code to run if checked
console.log('Checked');
} else {
//code to run if unchecked
console.log('Unchecked');
}
});