チェックボックスの状態に応じてデータの属性値を切り替える方法は？

Question

<li>要素のdata-active属性をYに設定しようとしました。アクティブなチェックボックスの状態に応じて、それぞれ "はい"または "いいえ"に設定されました。

私のサンプルコードは、このようなものです：上記の私のコードから

$(document).ready(function() { 
 
    $('body').on('change','#active',function(){ 
 
    li = $(this).parent(); 
 
    if($(this).attr('checked')=='true') { 
 
     $(this).attr('checked','false'); 
 
     li.attr('data-active','N'); 
 
    } else { 
 
     li.attr('data-active','Y'); 
 
     $(this).attr('checked','true'); 
 
    } 
 
    console.log(li.data('active')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<ol class="example"> 
 
    <li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li> 
 
</ol>

は、#active上のイベントハンドラは、チェックボックスの状態が何であれにかかわらず、唯一のelse句で一致しました。

似たような質問がたくさんあることを理解していますが、私はそれらを試しましたが、誰も私の問題を解決しません。

data-activeをチェックボックスの状態に応じて「はい」または「いいえ」に切り替えるにはどうすればよいですか？ありがとう。あなたが.data使うべき

Answer 1

と.prop代わり

.attrのは、それが役に立てば幸い！

$(document).ready(function() { 
 
    $('body').on('change','#active',function(){ 
 
     li = $(this).parent(); 
 
     if ($(this).prop('checked')) { 
 
      li.data('active','Y'); 
 
     } else { 
 
      li.data('active','N'); 
 
     } 
 
     console.log(li.data('active')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<ol class="example"> 
 
    <li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li> 
 
</ol>