How with jquery get checkbox input not selected in boolean?

Question

In jquery 3.4.1 app I have checkbox defined

<div class="form-row mb-3 mt-3">
    <label for="step_2_invoice_on_next_period_cbx" class="col-12 col-sm-6 col-form-label">Invoice on next period</label>
    <div class="col-12 col-sm-6">
        <input type="checkbox" value="1" style="width: 50px;padding-left: 10px; margin-top: 7px;"
               id="step_2_invoice_on_next_period_cbx"
               checked>
    </div>
</div>

and I got valid true if checkbox input is selected. But I got undefined if checkbox input not is selected and I need to set additive condition :

var step_2_invoice_on_next_period_cbx= $("#step_2_invoice_on_next_period_cbx:checked").val()
if(typeof step_2_invoice_on_next_period_cbx=='undefined') step_2_invoice_on_next_period_cbx= false

Looks like it works ok, but if there is a better way to got valid true/false condition without additive checking line ?

Thanks!

Answer 1

Solution

This is the way you should go about doing this this way will listen for when the checkbox is checked ( true or false ) how it does this is by listening for the checkbox to be clicked when it is clicked it will run everything inside of stepTwoInvoiceOnNextPeriodCbx.click() what we are doing inside of the stepTwoInvoiceOnNextPeriodCbx.click() event is checking if the property checked is true or false ( stepTwoInvoiceOnNextPeriodCbx.prop("checked") ) if this is true in my code example we are going to change the text of the element with an id of #text to "Is checked" when true and "is not checked" when false .

JavaScript

let stepTwoInvoiceOnNextPeriodCbx = $(
  "#step_2_invoice_on_next_period_cbx"
);
let text = $("#text"); // This is just here to show output of the example

// Listen for checkbox to be click
stepTwoInvoiceOnNextPeriodCbx.click(() => {
  // If the checked property
  if (stepTwoInvoiceOnNextPeriodCbx.prop("checked")) {
    // Is true set text to "Is checked"
    text.text("Is checked");
  } else {
    // Is false set text to "Is not checked"
    text.text("Is not checked");
  }
});

HTML

<div id="app">
  <div class="form-row mb-3 mt-3">
    <label
      for="step_2_invoice_on_next_period_cbx"
      class="col-12 col-sm-6 col-form-label"
      >Invoice on next period</label
    >
    <div class="col-12 col-sm-6">
      <input
        type="checkbox"
        value="1"
        style="width: 50px; padding-left: 10px; margin-top: 7px;"
        id="step_2_invoice_on_next_period_cbx"
        checked
      />
    </div>
    <span id="text"></span>
  </div>
</div>

Here is an example I made so you can see how it works https://codesandbox.io/s/compassionate-blackwell-d9hex?file=/src/index.js

What your code is doing

You are checking to see if the data type of the value property is "undefined" , "undefined" and undefined are two different things since you are checking the type of the data what you are telling the computer to do is check if the type of the value property is equal to ( == ) a string (text data type) with the value of undefined ( "undefined" ) this comparison is not checking the data types you would have to use the identical operator ( === ) this checks the value and data type are the same. the val() method get the value property of the HTM L element this in your case will always be undefined because it is never set.

The way you have coded this also means that it will only run once the page has loaded since you are not listening for a event (like click() in my example) the click() event means anytime the #step_2_invoice_on_next_period_cbx element is clicked run the function inside of the click() event.

Other things to keep in mind

In JavaScript, it is good practice to use camelcase for naming varibles and functions, not undersorces (snakecase) languages like PHP use snakecase ( this_is_snake_case ) while in JavaScript we use camelcase ( thisIsCamelCase ) but we tend use pascalcase ( ThisIsPascalCase ) for class names.

Answer 2

It looks like you want prop : https://api.jquery.com/prop/

Not sure what you're trying to accomplish based on the code, so here is some examples:

This code will take a checkbox that is checked and uncheck it for instance:

$(document).ready(function() {
    var step_2_invoice_on_next_period_cbx= $("#step_2_invoice_on_next_period_cbx:checked");

    if (step_2_invoice_on_next_period_cbx.prop("checked")) {
        step_2_invoice_on_next_period_cbx.prop("checked", false);
    }
})

This code will take a checkbox that is not checked and do something

$(document).ready(function() {
    var step_2_invoice_on_next_period_cbx= $("#step_2_invoice_on_next_period_cbx:checked");

    if (!step_2_invoice_on_next_period_cbx.prop("checked")) {
        //do something
    }
})

Answer 3

JavaScript

var isChecked = document.querySelector("#step_2_invoice_on_next_period_cbx").checked;

jQuery

var isChecked = $("#step_2_invoice_on_next_period_cbx").prop("checked");

---

$("#step_2_invoice_on_next_period_cbx:checked") gets you a HTML element with

1. id="step_2_invoice_on_next_period_cbx"
2. state "checked"

For an unchecked element the second condition is false and will return undefined for you.