选中复选框时,会显示文本Checked
。取消选中所有复选框时,如何隐藏文本Checked
?
$('.rafcheckbox').click(function() {
$(".rafoptions").show();
});
<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />
<div class="rafoptions" style="display:none">Checked</div>
为了完成这项工作,您可以使用:checked
选择器和length
属性来确定是否检查了任何框。然后你可以使用toggle()
来隐藏/显示div
。
var $checkboxes = $('.rafcheckbox').change(function() {
var anyChecked = $checkboxes.filter(':checked').length != 0;
$(".rafoptions").toggle(anyChecked);
});
.rafoptions { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />
<div class="rafoptions">Checked</div>
您可以使用ES6中引入的every()
来实现这一目标
$(".rafcheckbox").click(function() {
let checkedInputs = [];
$(".rafcheckbox").each(function() {
checkedInputs.push(this.checked)});
if(checkedInputs.every(element => !element))
$(".rafoptions").hide();
else
$(".rafoptions").show();
});