要实现按关键字或类别选中相关复选框,你可以使用JavaScript来处理复选框的选中逻辑。下面是一个简单的示例代码:
HTML部分:
JavaScript部分:
// 监听复选框的改变事件
document.querySelectorAll('input[name="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var selectedKeywords = getSelectedValues('checkbox');
var selectedCategories = getSelectedValues('category');
// 根据选中的关键字和类别进行逻辑处理
console.log("选中的关键字:" + selectedKeywords);
console.log("选中的类别:" + selectedCategories);
});
});
// 获取选中的复选框的值
function getSelectedValues(name) {
var selectedValues = [];
document.querySelectorAll('input[name="' + name + '"]:checked').forEach(function(checkbox) {
selectedValues.push(checkbox.value);
});
return selectedValues;
}
在上面的示例中,我们为关键字和类别分别创建了一组复选框,并通过监听复选框的change
事件来获取选中的复选框的值。在change
事件处理程序中,我们调用getSelectedValues
函数来获取选中的关键字和类别的值,并根据这些值进行逻辑处理(在示例中只是简单地将选中的值打印到控制台)。getSelectedValues
函数用于获取选中的复选框的值,它使用document.querySelectorAll
方法选择所有指定名字的复选框,并使用checked
属性来判断是否选中,然后将选中的值存入一个数组中返回。
这样,当用户选中或取消选中关键字或类别复选框时,你可以根据选中的值来进行相应的操作。你可以在change
事件处理程序中添加你自己的逻辑代码,比如显示或隐藏相关内容等。