Author: John Au-Yeung

Sometimes, we want to check all checkboxes with jQuery.

In this article, we’ll look at how to check all checkboxes with jQuery.

Set the checked Property

We can use jQuery to set the checked attribute of each checkbox element.

For instance, if we have the following HTML:

<div>  
  <input type="checkbox" id="checkAll">check all  
  <input type='checkbox' value='apple'> apple  
  <input type='checkbox' value='orange'> orange  
  <input type='checkbox' value='grape'> grape  
</div>

Then we can write the following JavaScript code to check all the checkboxes when we click check all:

$("#checkAll").click(function() {  
  $('input:checkbox').prop('checked', this.checked);  
});

We get the checkbox with ID checkAll and add a click listener to it with click .

Then in the click handler callback, we get all the checkboxes and set the checked attribute of each of them to the checked value of the checkbox with ID checkAll .

Therefore, when we click check all, they’ll all be checked on and off at the same time.

Conclusion

We can use jQuery to set the checked attribute of each checkbox element.

We can use the window.scrollTo method to scroll to the coordinates we want on the page when we click on a link with a hash as the href .

For instance, we can write the following HTML:

<a href='#'>link 1</a>
<a href='#foo'>link 2</a>
<a href='#bar'>link 3</a>

<div id='bar' style='height: 500px'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div id='foo' style='height: 500px'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Then we write:

const offsetAnchor = () => {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

const anchors = document.querySelectorAll('a[href^="#"]')

for (const a of anchors) {
  a.addEventListener('click', (event) => {
    window.setTimeout(() => {
      offsetAnchor();
    }, 0);
  });
}

document.addEventListener('click', (event) => {
  window.setTimeout(() => {
    offsetAnchor();
  }, 0);
});

window.setTimeout(offsetAnchor, 0);

We have the offsetAnchor function that checks if the hash is appended to the URL with location.hash.length .

If it exists, then we scroll to the location of the element with the ID given by the hash, but with the y coordinate subtracted by 100.

Next, we get the a elements with href starting with the pound sign.

And if the for-of loop, we call addEventListener to add a click handler to each a element.

In the click handler, we call offsetAnchor in the setTimeout callback.

We put it in the setTimeout callback so that it’ll be called after the scrolling is done.

Next, we do the same with document so we scroll 100 pixels up from where we click on the page.

Also, we call offsetAnchor initially to scroll to the initial coordinates of the page.

We can use the IntersectionObserver API to watch when an element is visible or not.

For instance, if we have the following HTML:

<div>

</div>

Then we can add the following JavaScript:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  p.id = `el-${i}`
  div.appendChild(p)
}

const options = {
  rootMargin: '0px',
  threshold: 1.0
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    console.log(entry.intersectionRatio > 0 ? 'visible' : 'invisible');
  });
}, options);

const element = document.querySelector('#el-50')
observer.observe(element);

to add elements into the div with the for loop.

Then we use the IntersectionObserver constructor to add the intersection observer.

The options object has the rootMargin which is the margin for when the element is considered to be visible.

threshold is how much of the element is visible on the screen for it to be considered visible.

This value is between 0 and 1.

We pass in a callback into IntersectionObserver which runs when the element we’re watching appears or disappears from the screen.

We loop through entries to get the intersection entries object.

And we log entry.intersectionRatio and check if it’s bigger than 0 to see if the element we’re watching is visible.

Finally, we call observer.observe to watch the element with ID el-50 to be visible or invisible on the screen.

To get the number of lines in an element, we can divide the element’s height by its line-height.

For instance, if we have the following HTML:

<div style="line-height: 20px">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique nec magna non faucibus. Cras ut mi dignissim, tristique elit at, porta lorem. Pellentesque et odio sed enim commodo commodo in sit amet nunc. Phasellus eu tempus felis, id aliquet leo. Curabitur mollis mauris non dui ornare,  
</div>

Then we can do the computation by writing:

const el = document.querySelector('div');  
const divHeight = +el.offsetHeight  
const lineHeight = +el.style.lineHeight.replace('px', '');  
const lines = divHeight / lineHeight;  
console.log(lines);

We have to set the line height explicitly with the CSS line-height property as we did in the HTML.

Then we select the div with document.querySelector .

Next, we get the div’s height by using the offsetHeight property.

Then we get the lineHeight with the el.style.lineHeight property, we remove the 'px' so that we can convert the string to a number with + .

Next, we divide divHeight by lineHeight to get the number of lines in the div.

To use await with Rxjs observables, we’ve to convert it to a promise first.

To do that, we can use the firstValueFrom or lastValueFrom functions.

firstValueFrom returns promise that resolves to the first value of an observable.

lastValueFromreturns promise that resolves to the last value of an observable.

For instance, we can use it by writing:

import { firstValueFrom, lastValueFrom, of } from "rxjs";

(async () => {
  const myObservable = of(1, 2, 3);
  const first = await firstValueFrom(myObservable);
  console.log(first);
  const last = await lastValueFrom(myObservable);
  console.log(last);
})();

We have the myObservable observable, which we created by calling the of function.

of returns an observable that emits the arguments that we pass in sequentially.

Then we call firstValueFrom with myObservable .

Then we see that first is 1.

Next, we call lastValueFrom with myObservable .

The last is 3.