用于检查输入是不是“选中”或未“选中”的复选框功能

Posted 2023-05-09

【中文标题】用于检查输入是不是“选中”或未“选中”的复选框功能

【英文标题】：Checkbox function for checking if input is "checked" or not "checked"用于检查输入是否“选中”或未“选中”的复选框功能

【发布时间】：2017-11-09 08:56:06

【问题描述】：

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

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>

【问题讨论】：

如果您尝试"change" 事件而不是点击会怎样？另外，您的 html 标记是什么样的？您可能只想在 #fliter-item.Acting 而不是 input 上触发 click/change 事件

您可以使用'change' 事件。看看这里api.jquery.com/prop

尝试将 'click' 替换为 'change' 但结果是一样的...我会尽快发布一些我的标记。

【参考方案1】：

如果没有您的 html，我只能假设并建议您使用：

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

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

.hidden 
  display: none;

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

【讨论】：

我查看了我的代码并更正了我自己的一些标记错误，现在这似乎按我需要的方式工作。非常感谢您的回复。

@MylesMalloy 很高兴为您提供帮助。谢谢