Javascript показать, только если флажок имеет значение?

Question

Я запускаю ajax-скрипт, который должен проверить список флажков, чтобы определить

1. Установлен ли флажок
2. Имеет ли он значение
3. Передать значение в файл функции

Моя проблема в том, что если ничего не было выбрано, передаваемое значение равно "".Когда файл функции получает значение, в котором ничего нет, он не может найти совпадение и ничего не вернуть.

Чтобы решить эту проблему, мне нужно либо передать нулевой статус в файл, либо сначала проверить, выбран ли элемент, прежде чем обрабатывать эту часть сценария.

Я использую следующий скрипт для этого.Однако он не распознает, когда элемент был проверен.

Сценарий:

if(document.getElementsByName('category').checked) {
var checkboxes = document.getElementsByName('category');
var category = "";
    for (var i=0, n=checkboxes.length;i<n;i++) 
    {
        if (checkboxes[i].checked) 
        {
            category += ","+checkboxes[i].value;
        }
    }
    if (category) category = category.substring(1);
}

HTML:

 <div class="col-12">
       <label class="h6 my-3 pr-0" id="audience" for="language">Audiences</label>
        <div class="form-check">
            <input class="form-check-input" name="audience" type="checkbox" id="26" value="adult">
            <label class="form-check-label" for="26">Adult</label>
        </div><div class="form-check">
            <input class="form-check-input" name="audience" type="checkbox" id="28" value="children">
            <label class="form-check-label" for="28">Children</label>
        </div><div class="form-check">
            <input class="form-check-input" name="audience" type="checkbox" id="27" value="teen">
            <label class="form-check-label" for="27">Teen</label>
        </div>
        <input class="btn btn-accent mb-3 mt-3 mb-0 ajax" type="submit" id="submit" name="submit" value="Search">
    </div>

Вопрос:

Как сделатьЯ либо проверяю, было ли выбрано поле перед обработкой, либо передаю нулевое значение, если ничего не проверено?

Answer 1

Вам необходимо подключить прослушиватель событий, позвонив по номеру addEventListener().Прослушайте событие change, чтобы обнаружить тиканье / снятие галочки с флажка.

const checkbox = document.querySelector(
  'input[name= category]'
);
checkbox.addEventListener('change', event => {
  // insert your function
  console.log(event)
});

Answer 2

document.getElementsByName('category')

вернет вам NodeList элементов, имеющих имя category.Поскольку таких элементов нет, будет возвращено пустое значение NodeList.Теперь у вас есть if, где вы проверяете

document.getElementsByName('category').checked

, но ваш NodeList не имеет определенного атрибута checked, поэтому результат равен undefined, что является ложным значением, поэтому ifбудет оцениваться как false, поэтому ваш код внутри if никогда не будет выполнен.Итак, вам нужно получить элементы с именем тега audience:

var checkboxes = document.getElementsByTagName('audience');

Затем пройти по флажкам и собрать значения:

var categories = [];
for (var checkbox of checkboxes) {
    if (checkbox.checked) categories.push(checkbox.value);
}
category = categories.join(",");

Это логика, которую вынужно будет выполнить, когда вы намерены рассчитать категорию.Попробуйте это в консоли браузера и установите и снимите флажки, прежде чем сделать это.

Answer 3

Просто добавьте кнопку отправки, чтобы активировать ваш скрипт.Таким образом, вы можете сначала установить все флажки, а затем отправить

<form id="myForm">
 <div class="col-12">
       <label class="h6 my-3 pr-0" id="audience" for="language">Audiences</label>
        <div class="form-check">
            <input class="form-check-input" name="audience" type="checkbox" id="26" value="adult">
            <label class="form-check-label" for="26">Adult</label>
        </div><div class="form-check">
            <input class="form-check-input" name="audience" type="checkbox" id="28" value="children">
            <label class="form-check-label" for="28">Children</label>
        </div><div class="form-check">
            <input class="form-check-input" name="audience" type="checkbox" id="27" value="teen">
            <label class="form-check-label" for="27">Teen</label>
        </div>
        <input class="btn btn-accent mb-3 mt-3 mb-0 ajax" type="submit" id="submit" name="submit" value="Search">
    </div>
<input type="submit" value="submit" />
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  myScript(); // call your javascript here
});
</script>