Bagaimana untuk menatal senarai yang dibuat dengan butang radio jenis input?

Question

Ini kod saya, Saya mahu mereka diaktifkan apabila saya menatal ke bawah atau ke atas, bukan dengan mengklik padanya

<input type="radio" name="buttons" id="r1" checked>    
<input type="radio" name="buttons" id="r2">    
<input type="radio" name="buttons" id="r3">    
<input type="radio" name="buttons" id="r4">   

<div class="controls">
    <label for="r1"><span></span>LAB & Process Development</label>
    <label for="r2"><span></span>Quality & Regulatory</label>
    <label for="r3"><span></span>Engineering & Project Management</label>
    <label for="r4"><span></span>EHS</label>
</div>

Terima kasih kerana membantu saya

Answer 1

Saya tidak begitu faham apa yang anda ingin capai.

Tetapi jika anda ingin melakukan apa-apa pada tatal, anda harus mendengar acara tatal. Anda ada dua pilihan:

1. Anda boleh menyemak bila pengguna menatal tetikus pada radio
2. Anda sentiasa boleh menyemak bila pengguna menatal

Situasi pertama:

document.getElementById('controls').addEventListener('scroll', () => {
    //activate your element
});

Situasi kedua:

document.addEventListener('scroll', () => {
    //activate your element
});

Sunting: Seperti yang diminta dalam komen. Ia bergantung pada bagaimana anda ingin mencapai ini. Contohnya, anda mungkin ingin menyemak setiap radio dengan menggelung:

let current = 1;
let max = 4;

document.addEventListener('scroll', () => {
    //you need to uncheck the current one first
    document.getElementById('r' + current).checked = false;
    //If you reach the last radio element you reset the counter
    if(current == max) 
        current = 1;
    else
        current += 1;

    //Finally you activate the next radio
    document.getElementById('r' + current).checked = true;
});

Ini adalah pelaksanaan yang sangat mudah dan boleh diperbaiki.