jQuery — Callbacks and Checkboxes

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

callbacks.locked()

We can use the callbacks.locked() method to check if the callbacks list has been locked.

For example, if we write:

const foo = function(value) {
  console.log(`foo: ${value}`);
};

const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.lock();
console.log(callbacks.locked());

Then the last console log should be true since we called lock to lock the callbacks list.

callbacks.remove()

We can remove a callback with the callback.remove method.

For example, we can write:

const foo = function(value) {
  console.log(`foo: ${value}`);
};

const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.remove(foo);
callbacks.fire("world");

We called remove on foo to remove foo from the callbacks list.

Therefore, then 2nd fire callback won’t call foo .

.change()

The .change() method binds an event handler to the change JavaScript event.

It can also be used to trigger an the change event on an element.

For example, if we have the following HTML:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>

Then we can listen to the change event triggered on the elements with the class target by writing:

$(".target").change(function() {
  alert("Handler for .change() called.");
});

We can also trigger the change ebent on the element.

For example, if we have the following HTML:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  click me
</div>

Then we can add a click listen to the div with ID other .

When we click the div, we can trigger by change event on all the elements with class target by writing:

$(".target").change(function() {
  alert("Handler for .change() called.");
});

$("#other").click(function() {
  $(".target").change();
});

Now when we click the click me button, we’ll see the alert pop up for each element with class target .

:checkbox Selector

The :checkbox selector lets us select all elements with type checkbox .

For example, if we have the following HTML:

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">

  <input type="checkbox">
  <input type="file">
  <input type="hidden">
   <input type="password">
  <input type="radio">

  <input type="reset">
  <input type="submit">
  <input type="text">

  <select>
    <option>Option</option>
  </select>

  <textarea></textarea>
  <button>Button</button>
</form>

Then we can highlight all the checkboxes by writing:

$("form input:checkbox")
  .wrap("<span></span>")
  .parent()
  .css({
    background: "yellow",
    border: "3px red solid"
  });

We get the checkboxes with the :checkbox selector and set the background and border of all the selected elements.

:checked Selector

We can get all the checked checkboxes with the :checked selector.

For example, if we have the following HTML:

<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">

    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">

    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>

Then we can highlight the checked checkboxes by writing:

$("input:checked")
  .wrap("<span></span>")
  .parent()
  .css({
    background: "yellow",
    border: "3px red solid"
  });

Conclusion

We can lock the callbacks list and select checkboxes with jQuery.