Question

我有这个JavaScript代码：

$(document).ready(function(){
    $('#CustomersResellers').hide();

    $('input.ShowResellerAccounts').on('click', function(){
        if($(this).is(':checked')){
            alert('checked');
        }
    });
});

在我选中此复选框时显示警告，但如果在页面加载时已经选中该框，则它不会显示警报。

Answer 1

让我们更新一下这个功能：

var alertChecked = function() {
  if($(this).is(':checked')){
    alert('checked');
  }
}

// invoke the function when clicked
$('input.ShowResellerAccounts').on('click', alertChecked); 

//invoke the function for all matching elements
$('input.ShowResellerAccounts').each(alertChecked);

Answer 2

当然不应该显示它，因为在您的代码中没有选中复选框时附加事件处理程序。所以只需添加一个hanlder，当选中复选框时，就像这样

$(document).ready(function(){
    $('#CustomersResellers').hide();

    // Define a handle to avoid duplication 
    function handler(){
      alert('checked');   
    }

    if ($('input.ShowResellerAccounts').is(':checked')){
       handler();
    }

    $('input.ShowResellerAccounts').on('click', function(){
        if($(this).is(':checked')){
            handler();
        }
    });
});

Answer 3

这正是我所期望的行为。 if $(this).is(':checked')表示如果选中此复选框，则表示＆＃39; - 然后显示警报。但是，当您单击取消选中该框（on('click'...)）时，它将变为未选中状态，并且不会显示警报。

Answer 4

只需进行非常轻微的更改就可以了：

$(document).ready(function(){
    $('#CustomersResellers').hide();

    $('input.ShowResellerAccounts').on('click', function(){
        if($(this).is(':checked')){
            alert('checked');
        }
    })
    .trigger('click'); //<<<===== This is all you need to add :)
});

通常，您会在事件侦听器代码的末尾添加类似的事件触发器：

$('selector').on('event', handler).trigger('event');

在您的情况下，您可以使用.trigger('click')或.click()。非常干净和直接：）

特别注意

由于您正在处理复选框（而不是按钮），因此我赞成change事件发生click事件。

jQuery：在页面加载时检查CheckBox吗？

4 个答案: