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

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

是否选中复选框

它有价值吗

将值传递给函数文件

我的挣扎是，如果未选择任何内容，则传递的值为“”。当函数文件获取的值中没有任何内容时，它无法找到匹配项并返回任何内容

为了解决这个问题，我需要向文件传递一个空状态，或者在处理脚本的这一部分之前，首先检查一个项目是否被选中

我正在使用以下脚本来完成此操作。但是，它无法识别何时检查了项目

脚本：

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

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

if（document.getElementsByName（'category'）。选中）{
var复选框=document.getElementsByName（'category'）；
var类别=”；
对于（var i=0，n=checkbox.length；i只需添加一个提交按钮即可激活脚本。这样，您可以先单击所有复选框，然后再提交

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


观众
成人
儿童
青少年
document.getElementById（'myForm'）。addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
myScript（）；//在此处调用javascript
});
您需要通过调用
addEventListener（）
来连接事件侦听器。收听
change
事件以检测复选框的勾选/取消勾选

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

将返回名为
category
的元素的
NodeList
。由于没有此类元素，它将返回一个空的
NodeList
。现在，在您检查的位置有一个
if

document.getElementsByName('category').checked

但是您的节点列表没有定义
已检查的
属性，因此结果是
未定义的
，这是一个错误的值，因此
if
将被计算为
false
，因此
if
中的代码将永远不会执行。因此，您需要获取标记名为
观众的元素>:

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

然后遍历复选框并收集值：

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

这是您打算计算类别时需要执行的逻辑。请在浏览器控制台中试用，并在执行此操作之前签入和签出复选框。
我注意到的第一件事是您有
var checkboxes=document.getElementsByName（'category'）；
。这不应该得到“观众”而不是“类别”吗？谢谢Tim。我必须勾选第一部分是类别，第一部分是观众。我只是抄错了一个。类别的名称肯定不正确，这是问题的主要错误。问题是关于准备数据通过AJAX发送。op可能在学习AJAX，在这种情况下，不处理它的答案可能没有帮助。
var categories = [];
for (var checkbox of checkboxes) {
    if (checkbox.checked) categories.push(checkbox.value);
}
category = categories.join(",");