если флажок установлен, сделайте это

Когда я устанавливаю флажок, я хочу, чтобы он повернулся <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. Многого можно достичь, используя jquery с простым javascript.

Может случиться так, что this.checked всегда включен. Поэтому рекомендую:

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