Question

我希望我的jQuery函数能够检查复选框的属性，如果选中，则将id =“activate_post_checkbox_text”的文本设为黑色。否则我希望文本是灰色的。

的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>

这就是我现在在页面顶部的脚本类型=“text / javascript”区域中的样子。

function checkedDark () {

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

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

});


}

Answer 1

在您的标记中，您正在调用valueChange方法onclick，并且您正在使用checkedDark方法中的代码。我希望我没有遗漏任何东西。

使用jQuery来附加点击处理程序，而不是使用内联onclick语句。在处理程序内部，您可以使用this.checked查看是否选中了复选框，并使用css jQuery方法设置所需元素的文本颜色。

标记更改

<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

Answer 2

function checkedDark () {
    if($('#activate_post_checkbox').is(':checked')) {
            $("#activate_post_checkbox_text").css('color', '#000');
    } else {
            $("#activate_post_checkbox_text").css('color', '#666');
    }

}

http://jsfiddle.net/82m9C/

Answer 3

问题是“checked”属性不等于true，它等于“checked”或没有

http://www.w3schools.com/tags/att_input_checked.asp

修改

也许试试这个：

$('#activate_post_checkbox').is(':checked');

http://jsfiddle.net/mjgasner/M4Fhf/8/

Answer 4

我改变了你的代码： Fiddle

$(function() {
    $('#activate_post_checkbox_text').css('color', '#666666'); // sets color
    $('#activate_post_checkbox').change(function(){
        if($(this).is(':checked')) {
           $('#activate_post_checkbox_text').css('color', 'black');
        } else {
           $('#activate_post_checkbox_text').css('color', '#666666');
        }    
    });
});

HTML（删除了内联js）：

<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>

基本的jQuery函数没有响应

4 个答案: