仅当复选框有值时才显示 Javascript？

Question

我正在运行一个 ajax 脚本，需要检查复选框列表以确定

1. 复选框是否被选中
2. 是否有值(value)
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)
});