Question

我有这个jquery函数，当我的页面上的复选框被选中或取消选中时，它会完美执行。我希望在首次加载页面时运行此函数。我试过了。

<body class="body-{segment_1}" onload="checkboxChanged();" >

但这似乎不起作用。有没有办法做到这一点？

$(function() {

  $('input[type="checkbox"]').change(checkboxChanged);

  function checkboxChanged() {
      alert("we are here");

    var $this = $(this),
        checked = $this.prop("checked"),
        container = $this.parent(),
        siblings = container.siblings();
    container.find('input[type="checkbox"]')
    .prop({
        indeterminate: false,
        checked: checked
    })
    .siblings('label')
    .removeClass('custom-checked custom-unchecked custom-indeterminate')
    .addClass(checked ? 'custom-checked' : 'custom-unchecked');

    checkSiblings(container, checked);
    var selected = $('#page-wrap input:checkbox.color_cb:checked').map(function () {
         return $(this).attr('name');
    }).get();
    var selColors = selected.join(", ") ;
    alert(selColors);

    if (selColors == "") {
        // @todo What happens when no color page is selected.
        //document.getElementById("colorbook-images").innerHTML = "";
        //return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("colorbook-images-div").innerHTML = xmlhttp.responseText;               
            }
        }
        xmlhttp.open("GET","scripts/colorbook.php?q="+selColors,true);
        xmlhttp.send();
    }
  }

  function checkSiblings($el, checked) {
    var parent = $el.parent().parent(),
        all = true,
        indeterminate = false;

    $el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });

    if (all && checked) {
      parent.children('input[type="checkbox"]')
      .prop({
          indeterminate: false,
          checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');

      checkSiblings(parent, checked);
    } 
    else if (all && !checked) {
      indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;

      parent.children('input[type="checkbox"]')
      .prop("checked", checked)
      .prop("indeterminate", indeterminate)
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));

      checkSiblings(parent, checked);
    } 
    else {
      $el.parents("li").children('input[type="checkbox"]')
      .prop({
          indeterminate: true,
          checked: false
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass('custom-indeterminate');
    }
  }
});

Answer 1

只需在处理程序声明后添加.change()，它就会运行：

$('input[type="checkbox"]').change(checkboxChanged).change();

Answer 2

在第二行功能中，只需添加.change(); 代码：$('input[type="checkbox"]').change(checkboxChanged).change();

Answer 3

错误是你使用了不正确的复选框事件，你应该使用click()函数。要在dom上调用函数，只需在完成jquery函数之前调用该函数：

$(function() {
  function checkboxChanged() {
    alert("we are here");

    var $this = $(this),
      checked = $this.prop("checked"),
      container = $this.parent(),
      siblings = container.siblings();
    container.find('input[type="checkbox"]')
      .prop({
        indeterminate: false,
        checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');

    checkSiblings(container, checked);
    var selected = $('#page-wrap input:checkbox.color_cb:checked').map(function() {
      return $(this).attr('name');
    }).get();
    var selColors = selected.join(", ");
    alert(selColors);

    if (selColors == "") {
      // @todo What happens when no color page is selected.
      //document.getElementById("colorbook-images").innerHTML = "";
      //return;
    } else {
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("colorbook-images-div").innerHTML = xmlhttp.responseText;
        }
      }
      xmlhttp.open("GET", "scripts/colorbook.php?q=" + selColors, true);
      xmlhttp.send();
    }
  }

  function checkSiblings($el, checked) {
    var parent = $el.parent().parent(),
      all = true,
      indeterminate = false;

    $el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });

    if (all && checked) {
      parent.children('input[type="checkbox"]')
        .prop({
          indeterminate: false,
          checked: checked
        })
        .siblings('label')
        .removeClass('custom-checked custom-unchecked custom-indeterminate')
        .addClass(checked ? 'custom-checked' : 'custom-unchecked');

      checkSiblings(parent, checked);
    } else if (all && !checked) {
      indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;

      parent.children('input[type="checkbox"]')
        .prop("checked", checked)
        .prop("indeterminate", indeterminate)
        .siblings('label')
        .removeClass('custom-checked custom-unchecked custom-indeterminate')
        .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));

      checkSiblings(parent, checked);
    } else {
      $el.parents("li").children('input[type="checkbox"]')
        .prop({
          indeterminate: true,
          checked: false
        })
        .siblings('label')
        .removeClass('custom-checked custom-unchecked custom-indeterminate')
        .addClass('custom-indeterminate');
    }
  }
  $("input:checkbox").click(checkboxChanged);
  checkboxChanged();
});

你可以在这里看到它：http://codepen.io/anon/pen/pJeGMv。为了更好地在您的示例中使用JQuery，请学习ajax()和其他与AJAX相关的函数。

首次加载页面时运行jquery函数

3 个答案: