我需要一个特定的代码部分与单选类型而不是按钮工作

Question

我使用了W3中的代码来过滤网页上的产品。链接到W3代码

代码使用按钮过滤掉带有特定标签的产品。现在的问题是，我用单选按钮代替了按钮。它工作得很好，直到我转到另一个页面并回到产品页面。因为当我转到另一个页面，然后返回时，单选按钮在之前选择的单选按钮上仍然是活动的，而不是在"全选"上;默认情况下。过滤已重置，但单选按钮未重置。下面我将粘贴我使用的代码:

HTML:
<div class="products-filter">
<h3 class="filter-headers">Brands</h3>
<label class="container active">Select All
<input type="radio" checked="checked" name="radio", onclick="filterSelection('all')">
<span class="checkmark"></span>
</label>
<label class="container">Doosan
<input type="radio" name="radio", onclick="filterSelection('doosan')">
<span class="checkmark"></span>
</label>..... AND SO ON.
Javascript:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("products");
if (c == "all") c = "";
// Add the "product-show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "product-show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "product-show");
}
}
// Show filtered elements
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];
}
}
}
// Hide elements that are not selected
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(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementsByClassName("products-filter");
var btns = btnContainer.getElementsByClassName("container");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

我希望它清楚我需要什么?我需要单选按钮"全选"返回页面时默认选中

Thakn你

Answer 1

<input type="radio" name="filter" class="btn active" onclick="filterSelection('all')" value="Show all" checked="checked"  />
<input type="radio" class="btn" name="filter" onclick="filterSelection('cars')" value="Cars" />
<input type="radio" class="btn" name="filter" onclick="filterSelection('animals')" value="Animals" />
<input type="radio" class="btn" name="filter" onclick="filterSelection('fruits')" vlaue="Fruits" />
<input type="radio" class="btn" name="filter" onclick="filterSelection('colors')" value="Colors" />
</div>

您所缺少的是输入类型为radio的checked属性。

<input type="radio" checked="checked">