Question

我使用此代码在单击1个或多个复选框时显示一些文本（Checked）。我使用on是因为复选框是动态创建的。

似乎只有IE Edge无法处理它。我必须在复选框上单击两次以显示Checked文本。在所有其他浏览器中，它可以立即工作。真的不知道代码有什么问题

<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />

<div class="cb-buttons" style="display:none">Checked</div>

<script>

$(document).on('click','.rafcheckbox',function() {  
  var $checkboxes = $('.rafcheckbox').change(function() {

    var anyChecked = $checkboxes.filter(':checked').length != 0;
    $(".cb-buttons").toggle(anyChecked);
  });
});

</script>

提琴：https://jsfiddle.net/g5tp4kjm/

Answer 1

由于您已经具有元素的委托，因此只需将其更改为更改事件处理程序即可。
在该逻辑中，切换hide类，但如果未检查任何元素，则强制其具有hide类。

$(document).on('change','.rafcheckbox',function() {
  $('.cb-buttons').toggleClass('hide', $('.rafcheckbox:checked').length < 1);
});

.hide { 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="cb-buttons hide">Checked</div>

Answer 2

让我们尝试另一种方式。

$(document).on('click','.rafcheckbox',function() {

    if($('.rafcheckbox').is(':checked'))
    {
        //do whatever you want
    }  
    else  
    {
        //do the opposite
    }
});

如何更正复选框并显示是否已选中

2 个答案: