В приложении jquery 3.4.1 у меня установлен флажок

 <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>
  

и я получил действительное значение true, если установлен флажок ввода. Но я получил undefined, если флажок input not установлен
, и мне нужно установить аддитивное условие :

 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
  

Похоже, это работает нормально, но если есть лучший способ получить действительное условие true / false без
строки аддитивной проверки?

Спасибо!

Решение

Это способ, которым вы должны это сделать, этот способ будет прослушивать, когда checkbox проверяется ( true или false ), как это делается, прослушивая checkbox , чтобы щелкнуть, когда он щелкнет, он запустит все stepTwoInvoiceOnNextPeriodCbx.click() , что мы делаем внутри stepTwoInvoiceOnNextPeriodCbx.click() события, проверяет, является ли свойство checked true или false ( stepTwoInvoiceOnNextPeriodCbx.prop("checked") ) если это верно в моем примере кода, мы собираемся изменить текст элемента с id помощью of #text на "Is checked" when true и "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>
  

Вот пример, который я сделал, чтобы вы могли увидеть, как это работает https://codesandbox.io/s/compassionate-blackwell-d9hex?file=/src/index.js

Что делает ваш код

Вы проверяете, соответствует ли тип данных value свойства "undefined" , "undefined" и undefined это две разные вещи, поскольку вы проверяете тип данных, что вы говорите компьютеру, это проверить value , равен ли тип свойства ( == ) a string (текстовый тип данных) со значением undefined ( "undefined" ) это сравнение не проверяет типы данных, которые вам пришлось бы использовать идентичный operator ( === ), это проверяет, совпадают ли значение и тип данных. val() метод получает value свойство элемента HTM L это в вашем случае всегда будет undefined , потому что оно никогда не устанавливается.

То, как вы это закодировали, также означает, что он будет запускаться только после загрузки страницы, поскольку вы не прослушиваете событие (как click() в моем примере) click() событие означает, что при каждом нажатии на #step_2_invoice_on_next_period_cbx элемент выполняется функция внутри click() события.

Другие вещи, которые следует иметь в виду

В JavaScript хорошей практикой является использование camelcase для именования переменных и функций, а не для языков undersorces (snakecase), таких как PHP use snakecase ( this_is_snake_case ), в то время как в JavaScript мы используем camelcase ( thisIsCamelCase ), но мы склонны использовать pascalcase ( ThisIsPascalCase ) для имен классов.

Похоже, вы хотите prop : https://api.jquery.com/prop /

Не уверен, чего вы пытаетесь достичь на основе кода, поэтому вот несколько примеров:

Этот код примет флажок, который установлен, и, например, снимет его:

 $(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);
    }
})
  

Этот код примет флажок, который не установлен, и что-то сделает

 $(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
    }
})
  

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") возвращает вам HTML-элемент с

1. id =»step_2_invoice_on_next_period_cbx»
2. состояние «проверено»

Для непроверенного элемента второе условие равно false и вернется undefined для вас.