Question

I would like my jQuery function to turn check the attribute of the checkbox and if checked make a text with the id =”activate_post_checkbox_text” black. otherwise i would like the text to be grey.

jQuery

function checkedDark () {
    if($("#activate_post_checkbox").attr("checked")) {
            $("#activate_post_checkbox_text").style.color = "#000";
    } else {
            $("#activate_post_checkbox_text").style.color = "#666";
    }

}

HTML

<li class="activate_post_checkbox">
<input type="checkbox" id="activate_post_checkbox" value="active" onClick="valueChange();" /><span id="activate_post_checkbox_text">Make my posting active immediately.</span>
</li>

this is how it looks right now in my script type=”text/javascript” area on the top of my page.

function checkedDark () {

$('#activate_post_checkbox')
.click(valueChange)
.click(function(){

  $("#activate_post_checkbox_text").css('color', this.checked ? '#000' : '#666');

});


}

Answer 1

In your markup you are calling valueChange method onclick and you are wrtting the code in checkedDark method. I hope I am not missing anything.

Instead of having inline onclick statement use jQuery to attach click handler. Inside the handler you can use this.checked to see if the checkbox is checked or not and use css jQuery method to set the text color of the required element.

Markup change

<li class="activate_post_checkbox">
<input type="checkbox" id="activate_post_checkbox" value="active"/><span id="activate_post_checkbox_text">Make my posting active immediately.</span>
</li>

JS

$('#activate_post_checkbox')
.click(valueChange)
.click(function(){

  $("#activate_post_checkbox_text").css('color', this.checked ? '#000' : '#666');

});

Demo