TransWikia.com

Как сделать переход по ссылке по input>

Stack Overflow на русском Asked on December 9, 2021

При использовании данного скрипта выполняется следующее:

  1. Внутри каждого чекбокса – value=""
  2. При нажатии на чекбокс захватывается значение value-""
  3. При активации трех разных чекбоксов суммируется значение всех value
  4. Выполняется переход по ссылке, части которой были в 3-х value

Вопрос: как сделать так, чтобы переход по ссылке выполнялся при любом порядке активации чекбосов?

Сейчас перход выполняется только по порядку: первый, второй, третий.

/////////

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

One Answer

Раскомментируйте 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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP