[英]Checkbox function for checking if input is “checked” or not “checked”
我希望某些元素在选中复选框时对其应用一个类,并在未选中(或未选中)的情况下删除该类。 我尝试用几种不同的方式编写此代码,但是一旦单击复选框,我便只能将类应用于元素,但是重新单击不会从元素中删除该类,即使我希望这样做也可以。
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>
没有您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.