如果选中此复选框，请执行此操作

选中复选框时，我希望它打开<p> #0099ff。

当我取消选中该复选框时，我希望它撤消该操作。

我到目前为止的代码：

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

我会用 .change()和this.checked：

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

-

在使用this.checked
Andy E时，我们对如何过度使用jQuery进行了很好的撰写：利用 jQuery 的强大功能访问元素的属性。文章具体对待使用的.attr("id")，但在这情况下#checkbox 是一个<input type="checkbox" />元素的问题是相同的$(...).attr('checked')（甚至$(...).is(':checked')）对this.checked。

试试这个。

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

有时我们会滥杀jquery。使用带有普通javascript的jquery可以实现很多事情。

可能会发生“ this.checked”始终处于“ on”状态。因此，我建议：

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

最好用不同的颜色定义一个类，然后切换该类

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

这样，您的代码就更干净了，因为您不必指定所有的CSS属性（假设您要添加边框，文本样式或其他...），而只需切换一个类

我发现了一个疯狂的解决方案，用于处理未选中或未选中的复选框问题，这是我的算法...创建一个全局变量，可以说var check_holder

check_holder有3个状态

1. 未定义状态
2. 0状态
3. 1个州

如果选中该复选框，

$(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
     }
});

上面的代码可在许多情况下用于查找是否已选中复选框。其背后的概念是将复选框状态保存在变量中，即打开或关闭时。我希望该逻辑可以用来解决您的问题。

检查此代码：

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

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

可能您可以使用此代码来执行操作，因为该复选框处于选中状态或未选中状态。

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

我会做 ：

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

参见：https : //www.w3schools.com/jsref/prop_checkbox_checked.asp

最佳实施

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

演示版

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

<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');
     }
});