Stack Overflow на русском Asked on December 9, 2021
При использовании данного скрипта выполняется следующее:
Вопрос: как сделать так, чтобы переход по ссылке выполнялся при любом порядке активации чекбосов?
Сейчас перход выполняется только по порядку: первый, второй, третий.
/////////
let data = {
a: null,
b: null,
c: null
}
document.addEventListener("change", function (event) {
const input = event.target.closest("input");
if (!input || input.getAttribute("type") !== "radio") return;
let name = input.name;
if (!name || !data.hasOwnProperty(name)) return;
if (!input.checked) {
data[name] = null;
return;
}
data[name] = input.value;
if (name === "c") {
// если какое-то значение не выбрано
if (Object.values(data).some(v => !v)) return;
location.pathname = data.a + data.b + data.c;
}
});
.results {
padding: 10px;
}
.results .tabs li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid red;
}
.content {
display: none;
}
.content.show {
display: initial;
}
.tabs {
display: flex;
justify-content: space-around;
}
.productdetails {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1000;
}
.example-lk {
display: block;
width: 50px;
height: 50px;
border: 1px solid;
}
.content li {
border: 1px solid;
width: 30%;
}
.ex-lb {
border: 1px solid black;
padding: 5px;
font-size: 13px;
}
h3 {
font-size: 14px;
}
<ul>
<li>
<input autocomplete="off" id="link5" class="linkinp form-check-input" name="a" type="radio" value="3q/noutbuki/ne-zariazhaetsia/">
</li>
<label for="link5" class="link">
1-й
</label>
</ul>
<label class="example-lk">
<input class="form-check-input" name="b" type="radio" value="OG1503NH" autocomplete="off">2-й</label>
<input autocomplete="off" class="form-check-input wannaup" value="/threeq-elonezerozerofourn.html" type="radio" name="c">
Раскомментируйте location.pathname = data.a + data.b + data.c
let data = {
a: null,
b: null,
c: null
}
document.addEventListener("change", function (event) {
const input = event.target.closest("input");
if (!input || input.getAttribute("type") !== "radio") return;
let name = input.name;
if (!name || !data.hasOwnProperty(name)) return;
if (!input.checked) {
data[name] = null;
return;
}
data[name] = input.value;
// если какое-то значение не выбрано
if (Object.values(data).some(v => !v)) { return }
else
{ /*location.pathname = data.a + data.b + data.c;*/
console.log(data.a + data.b + data.c); }
});
.results {
padding: 10px;
}
.results .tabs li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid red;
}
.content {
display: none;
}
.content.show {
display: initial;
}
.tabs {
display: flex;
justify-content: space-around;
}
.productdetails {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1000;
}
.example-lk {
display: block;
width: 50px;
height: 50px;
border: 1px solid;
}
.content li {
border: 1px solid;
width: 30%;
}
.ex-lb {
border: 1px solid black;
padding: 5px;
font-size: 13px;
}
h3 {
font-size: 14px;
}
<ul>
<li>
<input autocomplete="off" id="link5" class="linkinp form-check-input" name="a" type="radio" value="3q/noutbuki/ne-zariazhaetsia/">
</li>
<label for="link5" class="link">
1-й
</label>
</ul>
<label class="example-lk">
<input class="form-check-input" name="b" type="radio" value="OG1503NH" autocomplete="off">2-й</label>
<input autocomplete="off" class="form-check-input wannaup" value="/threeq-elonezerozerofourn.html" type="radio" name="c">
Answered by s.kuznetsov on December 9, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP