Check/Uncheck radio buttons JavaScript

Question

Can someone help me with this one? When I set a() to #j1 and b() to #j2, everything works fine (click-check one radio button, the other one gets unchecked), but when I set both to c(), it only works when I click button 2 first and then button 1, and then it gets stuck. I have also tried with a loop, but I guess there is an inherent mistake in its logic.

Thanks in advance. Daniel

<body>

    <input type="radio" id="j1" onclick="c()"><label for="j1">1</label>
    <input type="radio" id="j2" onclick="c()"><label for="j2">2</label>

    <script>
        const j1 = document.querySelector("#j1");
        const j2 = document.querySelector("#j2");

        function a(){
            j1.checked = true;
             j2.checked = false;
         }

        function b(){
            j1.checked = false;
            j2.checked = true;
        }

        function c(){
                if(j1.checked===true){
                    j2.checked=false;
                }
                else if(j2.checked===true){
                    j1.checked=false;
                }
            }
    </script>
</body>

You can't "set a() to #j1". You mean "set #j1 to use a()", right? — Sinus tentaclemonster
– Sinus tentaclemonster, Commented Jan 11, 2020 at 22:46

Sinus tentaclemonster · Accepted Answer · 2020-01-11 22:48:06Z

1

You seem to be trying to replicate the default radio button behaviour. Set a name="foo" attribute on your <input>s and they'll form a select-only-one group for you.

answered Jan 11, 2020 at 22:48

Sinus tentaclemonster

5384 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Mano Over a year ago

That's it! I forgot to use the name attribute, and I tried to replicate it with JavaScript. Thank you!

Sinus tentaclemonster Over a year ago

Glad I could help! Please mark the question as answered, then. :)

Antoine Guerra · Accepted Answer · 2020-01-11 23:02:17Z

1

I'm not sure to understand which you ask but i think you need something like this :

const j1 = document.querySelector("#j1");
const j2 = document.querySelector("#j2");

function a() {
    j2.checked = false;
}

function b() {
    j1.checked = false;
}

<body>
    <input type="radio" id="j1" onclick="a()"><label for="j1">1</label>
    <input type="radio" id="j2" onclick="b()"><label for="j2">2</label>
</body>

answered Jan 11, 2020 at 23:02

Antoine Guerra

4413 silver badges6 bronze badges

1 Comment

Daniel Mano Over a year ago

Thank you for your contribution. I am just starting using radio buttons and JavaScript and because I left out the name attribute of the inputs, I tried to simulate it with JavaScript. a() and b() worked fine, but I tried to merge them to c() and this is wehere it all went awry. In any case, thank you for your input :)

Collectives™ on Stack Overflow

Check/Uncheck radio buttons JavaScript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related