チェックボックスがチェックされている場合、これを行います

チェックボックスをオンにすると、オンになり<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
アンディ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」が常に「オン」になっている場合があります。したがって、私はお勧めします：

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