Question

我有三个复选框。我想仅为选中的复选框将类添加到父li。其他我想删除类名激活或添加关闭。

HTML

  <ul>
    <li class="active">
      <ul>
        <li>
          <input type="checkbox" class="level"/>
          <label>test1</label>
        </li>
      </ul>
    </li>
    <li class="closed">
      <ul>
        <li>
          <input type="checkbox" class="level"/>
          <label>test2</label>
        </li>
      </ul>
    </li>
    <li class="closed">
      <ul>
        <li>
          <input type="checkbox" class="level"/>
          <label>test3</label>
        </li>
      </ul>
    </li>
  </ul>

的JavaScript

$('.level').on('click', function(e) {
    if ($(this).attr('checked')) {
        $(this).closest('ul').parent().addClass('active');
    } else {
        $(this).closest('ul').parent().removeClass('active');
    }
});

Answer 1

您可以使用toggleClass

＆＃13;

$('.level').on('click', function(e) {
  var $ul = $(this).closest('ul').parent();
  $ul.toggleClass('active', this.checked);
  $ul.toggleClass('closed', !this.checked);
  if (this.checked) {
    $('.level').not(this).prop('checked', false).closest('ul').parent().removeClass('active').addClass('closed');
  }
});

＆＃13;

.active {
  color: green;
}
.closed {
  background-color: lightgrey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="closed">
    <ul>
      <li>
        <input type="checkbox" class="level" />
        <label>test1</label>
      </li>
    </ul>
  </li>
  <li class="closed">
    <ul>
      <li>
        <input type="checkbox" class="level" />
        <label>test2</label>
      </li>
    </ul>
  </li>
  <li class="np closed">
    <ul>
      <li>
        <input type="checkbox" class="level" />
        <label>test3</label>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

ToggleClass 绝对是你想要的，但是如果你正确地连接事件监听器，你也不需要遍历dom来找到父列表项。

相反，您可以使用 delegateTarget ：

// note i've added a 'top' class to the main <ul>
$('ul.top > li').on('change', 'input', function (e) {

  // select the top-level <li>
  $(e.delegateTarget)
  
  // toggle the active/closed class based on the 'checked' state of the input
  .toggleClass('active', this.checked).toggleClass('closed', !this.checked);
  
});

.top li:before { content: attr(class); } .active { font-weight: bold; color: green; } .closed { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="top"><li class="active"><ul><li><input type="checkbox" class="level" checked /><label>test1</label></li></ul></li><li class="closed"><ul><li><input type="checkbox" class="level" /><label>test2</label></li></ul></li><li class="closed"><ul><li><input type="checkbox" class="level" /><label>test3</label></li></ul></li></ul>

如何将选中的类添加到其他已删除的复选框中

2 个答案: