选中复选框时如何切换文本,未选中则如何隐藏

时间:2019-02-20 13:39:21

标签: javascript jquery hide show

选中复选框时,将显示文本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>

2 个答案:

答案 0 :(得分:3)

要执行此操作,可以使用: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>

答案 1 :(得分:0)

您可以通过使用ES6中引入的assert signal_was_called == True assert False == True 来实现

every()

JSFiddle