我试图一次过滤多个项目。例如水果和动物甚至3+。到目前为止，它只能通过一次选择一个项目来实现。我如何选择多个项目？我也试过了https://wch.io/static/tagsort/demo-stacks/index.html，但是它显示了文本，但它应该是如何但是在javascript中？
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}.filterDiv {
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}<h2>Filter DIV Elements</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all<br>
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars<br>
<input type="radio" onclick="filterSelection('animals')" name="category"> Animals<br>
<input type="radio" onclick="filterSelection('fruits')" name="category"> Fruits<br>
<input type="radio" onclick="filterSelection('colors')" name="category"> Colors<br>
<div class="container">
<div class="filterDiv cars">BMW</div>
<div class="filterDiv colors fruits">Orange</div>
<div class="filterDiv cars">Volvo</div>
<div class="filterDiv colors">Red</div>
<div class="filterDiv cars animals">Mustang</div>
<div class="filterDiv colors">Blue</div>
<div class="filterDiv animals">Cat</div>
<div class="filterDiv animals">Dog</div>
<div class="filterDiv fruits">Melon</div>
<div class="filterDiv fruits animals">Kiwi</div>
<div class="filterDiv fruits">Banana</div>
<div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>
</div>
答案 0 :(得分：1)
DECLARE @S varchar(10)='2017092018'
SELECT CAST(LEFT(@s, 8) AS DATETIME) + RIGHT(@s,2)/24.0;
// If we save our current state somewhere, we can easily filter the divs.
var checkedCategories = ["cars", "animals", "fruits", "colors"];
// We need a function that detects the click on a checkbox and adds/removes that category.
var changeCategory = function changeCategory(event) {
// The event object will tell us exactly what was clicked.
var checkbox = event.target;
// The category we want toa dd or remove is the attribute
var category = checkbox.getAttribute("data-category");
// To check if we already have the category in the array, we just check the index.
var savedCategoryIndex = checkedCategories.indexOf(category);
// If the checkbox is checked, that category has to already exist in the array or get added.
if (checkbox.checked && savedCategoryIndex === -1) {
checkedCategories.push(category);
}
// if it is not checked and is present in the array, it needs to be removed.
else if (!checkbox.checked && savedCategoryIndex !== -1) {
checkedCategories.splice(savedCategoryIndex, 1);
}
renderCategories();
};
// We want a reusable function that will show/hide any categories we want to see.
var renderCategories = function renderCategories() {
// We need a list of all the divs. So we just select all the divs that have the data-category attribute and slice them into an array.
// Could be replaced by Array.from() if your browser supports it.
var categoryDivs = Array.prototype.slice.call(document.querySelectorAll("div[data-category]"));
// Now we need to loop over all the divs and check if they need to get hidden or not.
categoryDivs.forEach(function(div) {
// Get all the tags the div has
var tags = div.getAttribute("data-category").split(" ");
// If at least one tag of the div is inside our categories array, we know it'll need to get shown.
var divShouldBeShown = tags.some(function(tag) {
return checkedCategories.indexOf(tag) !== -1;
});
// The decide if we need to hide the div or not.
// Can be replaced by a classList.toggle() if your browser supports it.
if (divShouldBeShown && div.className.indexOf("hidden") !== -1) {
div.className = div.className.replace("hidden", "");
} else if (!divShouldBeShown && div.className.indexOf("hidden") === -1) {
div.className = div.className + " hidden";
}
});
};
// Finally we have to add an event to the checkboxes.
document.querySelector("#categoryBoxes").addEventListener('click', changeCategory);.hidden {
display: none;
}
答案 1 :(得分：0)
var inputs = document.getElementsByTagName("input");
var cbs = []; //will contain all checkboxes
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
cbs.push(inputs[i]);
}
}
filterSelection();
function filterSelection() {
var checkedVal = [],showAll = false;
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked && cbs[i].value == "all") {
var showAll = true;
break;
} else if (cbs[i].checked) {
checkedVal.push(cbs[i].value);
}
}
var x, i;
x = document.getElementsByClassName("filterDiv");
//if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (!showAll) {
for (var j = 0; j < checkedVal.length; j++) {
if (x[i].className.indexOf(checkedVal[j]) > -1) {
w3AddClass(x[i], "show");
}
}
}
else {
w3AddClass(x[i], "show");
}
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}.filterDiv {
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}<h2>Filter DIV Elements</h2>
<div><input type="checkbox" onclick="filterSelection()" name="category" value="all" checked> Show all</div>
<input type="checkbox" onclick="filterSelection();" name="category" value="cars"> Cars<br>
<input type="checkbox" onchange="filterSelection();" name="category" value="animals"> Animals<br>
<input type="checkbox" onchange="filterSelection();" name="category" value="fruits"> Fruits<br>
<input type="checkbox" onchange="filterSelection()" name="category" value="colors"> Colors<br>
<div class="container">
<div class="filterDiv cars show">BMW</div>
<div class="filterDiv colors fruits">Orange</div>
<div class="filterDiv cars">Volvo</div>
<div class="filterDiv colors">Red</div>
<div class="filterDiv cars animals">Mustang</div>
<div class="filterDiv colors">Blue</div>
<div class="filterDiv animals">Cat</div>
<div class="filterDiv animals">Dog</div>
<div class="filterDiv fruits">Melon</div>
<div class="filterDiv fruits animals">Kiwi</div>
<div class="filterDiv fruits">Banana</div>
<div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>
</div>
您可以使用复选框代替单选按钮来执行此操作。有一个名为Apply的按钮，它将触发过滤逻辑。
否则，如果您不想使用“应用”按钮，则可以使用https://wch.io/static/tagsort/demo-stacks/index.html中使用的技术 在这里，用户根据单击跨度切换类，并根据单击的div（具有活动类），您可以构建过滤逻辑。
希望这有帮助。
答案 2 :(得分：0)
输入中缺少属性ID。
属性name对收音机进行分组，并且只允许一次检查一个，但它本身无法通过提交或javascript来处理输入。
你可以使用CSS :checked来选择下一个兄弟姐妹，如果它只是关于视觉（没有提交或通过js处理），但它仍然需要一个id才能按预期工作。
带复选框的示例：
#all:checked ~ .container .filterDiv{
display: block;
}
.filterDiv, :not(#all):checked ~ .container .filterDiv{
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
#cars:checked ~ .container .cars,
#animals:checked ~ .container .animals,
#fruits:checked ~ .container .fruits,
#color:checked ~ .container .colors{
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}<h2>Filter DIV Elements</h2>
<input type="checkbox" id="all" checked> Show all<br>
<input type="checkbox" id="cars"> Cars<br>
<input type="checkbox" id="animals"> Animals<br>
<input type="checkbox" id="fruits" > Fruits<br>
<input type="checkbox" id="color" > Colors<br>
<div class="container">
<div class="filterDiv cars">BMW</div>
<div class="filterDiv colors fruits">Orange</div>
<div class="filterDiv cars">Volvo</div>
<div class="filterDiv colors">Red</div>
<div class="filterDiv cars animals">Mustang</div>
<div class="filterDiv colors">Blue</div>
<div class="filterDiv animals">Cat</div>
<div class="filterDiv animals">Dog</div>
<div class="filterDiv fruits">Melon</div>
<div class="filterDiv fruits animals">Kiwi</div>
<div class="filterDiv fruits">Banana</div>
<div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>
</div>
Here is an old pen of mine在radio内通过input label和form排序画廊，因此可以在服务器端提交或处理选择通过javascript。您可以从使用表单和广播的链接的codepen中激发自己。