Category: JavaScript

Sometimes, we want to check if all checkboxes are unchecked with JavaScript.

In this article, we’ll look at how to check if all checkboxes are unchecked with JavaScript.

How to check if all checkboxes are unchecked with JavaScript?

To check if all checkboxes are unchecked with JavaScript, we can select all the checked checkboxes with document.querySelector.

For instance, we write:

<form>
  <input type='checkbox'>
  <input type='checkbox'>
</form>

to add a form with some checkboxes.

Then we write:

const isChecked = document.querySelectorAll('input:checked').length === 0
console.log(isChecked)

to select all the checked checkboxes with document.querySelectorAll('input:checked').

Then we get the number of checked checkboxes with length.

And then we check if that is 0.

If it is, then no checkboxes are checked.

Conclusion

To check if all checkboxes are unchecked with JavaScript, we can select all the checked checkboxes with document.querySelector.

Sometimes, we want to reset hidden form fields with JavaScript.

In this article, we’ll look at how to reset hidden form fields with JavaScript.

How to reset hidden form fields with JavaScript?

To reset hidden form fields with JavaScript, we can hide the form fields with CSS instead of setting their type to hidden.

Then we can reset them like any other form field.

For instance, we write:

<form id="f">
  <input style='display: none' name="foo" value="bar" />
  <input type='reset'>
</form>

to add a form with an input hidden with CSS and a reset button input.

Then we write:

const f = document.getElementById('f');
const reset = document.querySelector('input[type="reset"]');

reset.onclick = () => {
  f.reset()
}

to select the form and the input respectively.

Then we set the reset.onclick property to a function that calls f.reset to reset the form field values.

Conclusion

To reset hidden form fields with JavaScript, we can hide the form fields with CSS instead of setting their type to hidden.

Then we can reset them like any other form field.

Sometimes, we want to set datetime on a datetime-local input with JavaScript.

In this article, we’ll look at how to set datetime on a datetime-local input with JavaScript.

How to set datetime on a datetime-local input with JavaScript?

To set datetime on a datetime-local input with JavaScript, we can convert the datetime to a local datetime string.

For instance, we write:

<input type="datetime-local" id="publishDate" required/>

to add a datetime-local input.

Then we write:

const now = new Date();
const input = document.querySelector('input')
input.value = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().substring(0, 19);

We select the input with document.querySelector.

Then we write new Date(now.getTime() - now.getTimezoneOffset() * 60000) to convert the current datetime to local datetime.

Then we call toISOString to convert it into a datetime string.

And finally, we call substring to extract the datetime part from the string.

Then we set that as the value of the input.

Conclusion

To set datetime on a datetime-local input with JavaScript, we can convert the datetime to a local datetime string.

Sometimes, we want to check whether a JavaScript string contains a line break.

In this article, we’ll look at how to check whether a JavaScript string contains a line break.

How to check whether a JavaScript string contains a line break?

To check whether a JavaScript string contains a line break, we can use the JavaScript regex’s exec method.

For instance, we write:

const text = "abc\n123"
const match = /\r|\n/.exec(text);
console.log(match)

We call /\r|\n/.exec with text to return the matches of newline characters in text.

As a result, we get ['\n', index: 3, input: 'abc\n123', groups: undefined]

Conclusion

To check whether a JavaScript string contains a line break, we can use the JavaScript regex’s exec method.

Sometimes, we want to remove everything but letters, numbers, space, exclamation and question mark from a JavaScript string.

In this article, we’ll look at how to remove everything but letters, numbers, space, exclamation and question mark from a JavaScript string.

How to remove everything but letters, numbers, space, exclamation and question mark from a JavaScript string?

To remove everything but letters, numbers, space, exclamation and question mark from a JavaScript string, we can use the JavaScript string’s replace method.

For instance, we write:

const text = "A(B){C};:a.b*!c??!1<>2@#3"
const result = text.replace(/[^a-zA-Z0-9]/g, '')
console.log(result)

We call text.replace with a regex that matches all characters that aren’t letters and numbers and replace them with empty strings.

As a result, result is 'ABCabc123'.

Conclusion

To remove everything but letters, numbers, space, exclamation and question mark from a JavaScript string, we can use the JavaScript string’s replace method.