Question

如果选中了复选框，我希望某些元素将类应用于它们，如果未选中（或未选中），则删除该类。我尝试用几种不同的方式编写这个，但是我只能在单击复选框后将类应用于元素，但是重新单击不会从元素中删除类，即使我希望它会

jQuery(document).ready(function($) {

  $('input[type="checkbox"]').on("click", function() {

    if($('#filter-Acting').prop('checked') == true) {

      $('.filter-item.Acting').addClass("hidden");

    } else if ($('#filter-Acting').prop('checked') == false) {

      $('.filter-item.Acting').removeClass("hidden");

    } 

  }
});

完成我追求的目标最简单的方法是什么？感谢。

*编辑：所提供的示例都没有为我工作，所以这里是表格和表格项目的相关标记......

<form>
  <fieldset>
    <div class="row">
      <div class="col-sm-12">
        <div class="checkbox" id="check-Acting">
          <input type="checkbox" id="filter-Acting" name="Acting" value="1" class="form-checkbox"/>
          <label for="filter-Acting" data-toggle="tooltip" data-placement="top"><span>Acting</span></label>
        </div>
      </div>
    </div>
  </fieldset>
</form>

<div class="container">
  <div class="panel filter-item Acting">
    --
  </div>
</div>

Answer 1

如果没有你的HTML，我可能只会假设它并建议你使用：

.toggleClass( className, state )：根据状态值切换一个或多个类

＆＃13;

$('input[type="checkbox"]').on("change", function (e) {
    $('.filter-Acting').toggleClass("hidden", !$('#filter-item.Acting').is(':checked'));
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="....">
    <input type="checkbox" name="vehicle" value="Bike" id="filter-item" class="Acting"> Click me<br>
    <input type="text" class="filter-Acting hidden"><br>
    <input type="submit"  value="Submit">
</form>

＆＃13;

复选框功能，用于检查输入是否已“选中”或未“检查”

1 个答案: