Question

如果用户点击复选框，我将使用以下javascript来隐藏表单。

我试图让代码在页面加载时运行，但我无法弄清楚如何执行此操作。有人可以帮忙吗？

$('#no_cage').change(function(){
  if (this.checked) {
    $('#cage_details').fadeOut();
  } else {
    $('#cage_details').fadeIn();
  }                   
});

HTML：

<input name="no_cage" id="no_cage" type="checkbox" value="1" <?php echo $checked; ?>><label for="no_cage">Check if not required</label>

<div id="cage_details">

<form>

...

</form>

</div>

当用户点击复选框时，此功能正常。但是当它从数据库中拉出时，并且在页面加载时已经选中了复选框。

Answer 1

只需在文档就绪处理程序中添加此代码即可。它将触发更改事件处理程序，而无需实际更改...

$('#no_cage').trigger("change");

或者，只需触发声明它的事件......

$('#no_cage').change(function(){
    if (this.checked) {
        $('#cage_details').fadeOut();
    }
    else {
        $('#cage_details').fadeIn();
    }                   
}).trigger("change");

这将添加事件处理程序，然后立即执行它，以便在文档加载时将表单设置为正确的状态。

Answer 2

您可以更改已检查的属性或触发更改事件。

$(function() {

  $('#no_cage').change(function() {
    if (this.checked) {
      $('#cage_details').fadeOut();
    } else {
      $('#cage_details').fadeIn();
    }
  });

  // Change the checked property
  $('#no_cage').prop('checked', true);

  // OR trigger the change event
  // $('#no_cage').trigger('change');

});

在页面加载时运行javascript以隐藏表单

2 个答案: