Question

我正在运行一个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);
}

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

只需添加一个提交按钮即可激活脚本。这样，您可以先单击所有复选框，然后提交

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

Answer 3

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(",");

这是您打算计算类别时需要执行的逻辑。在浏览器控制台中尝试一下，然后签入和签出复选框。

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

3 个答案: