Category: Javascript

You can check whether a given checkbox field is checked or not with Javascript by querySelector or getElementById method.

There are lots of ways to fetch Checked element results by native javascript.

Let’s give a code snippet for the Checkbox Element,

<div class="field choice">
    <input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox">
    <label for="show-password" class="label">Show Password</label>
</div>

• Checkbox Element checked with querySelector method,

  let showPasswordField = document.querySelector("input[name=show-password]"); // BY Name Attribute
  let showPasswordField = document.querySelector("#show-password"); //By ID
  if (showPasswordField) {
   let result = showPasswordField.checked;
   console.log(result);
  }

• To Get Results by id attribute,

let showPasswordField = document.getElementById("show-password");
if (showPasswordField) {
    let isChecked = showPasswordField.checked;
    console.log(isChecked);
}

• To Get Results by name attribute,
  Here Checkbox field name attribute value is “show-password”,

let showPasswordField = document.getElementsByName("show-password");
if (showPasswordField.length !== 0) {
    let isChecked = showPasswordField[0].checked;
    console.log(isChecked);
}

• Using jQuery