Question

我尝试将data-active元素的<li>属性设置为Y＆＃34;是＆＃34;或N＆＃34;否＆＃34;根据活动复选框状态分别选中或取消选中。

我的示例代码如下：

＆＃13;

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

＆＃13;

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

＆＃13;

从上面的代码开始，#active上的事件处理程序仅在else子句中匹配，无论复选框状态如何。

了解我有很多类似的问题，但是我尝试了但没有一个能解决我的问题。

如何将data-active切换为＆＃34;是＆＃34;或＆＃34;不＆＃34;根据复选框状态？感谢。

Answer 1

您应该使用.data和.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>

如何根据复选框状态切换数据属性值？

1 个答案: