Breaking News: Grepper is joining You.com. Read the official announcement!

radio button only one selected javascript

Add Answer

Ahmed Samir answered on May 31, 2021 Popularity 9/10 Helpfulness 1/10

answer radio button only one selected javascript

related only one selected radio button

related selecting only one radio button

related select only one option radio button

radio button only one selected javascript

Comment

-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>
<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
    <p>
        <button id="btn">Show Selected Value</button>
    </p>

    <p id="output"></p>

    <script>
        const btn = document.querySelector('#btn');        
        const radioButtons = document.querySelectorAll('input[name="size"]');
        btn.addEventListener("click", () => {
            let selectedSize;
            for (const radioButton of radioButtons) {
                if (radioButton.checked) {
                    selectedSize = radioButton.value;
                    break;
                }
            }
            // show the output:
            output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;
        });
    </script>
</body>
</html>
Code language: HTML, XML (xml)

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: www.javascripttutorial.net

Tags: javascript radio-button selected

Link to this answer
Share Copy Link

Contributed on May 18 2022

Ahmed Samir

0 Answers Avg Quality 2/10

Closely Related Answers

only one selected radio button

Comment

<input type="radio" name="test" value="value1"> Value 1
<input type="radio" name="test" value="value2"> Value 2
<input type="radio" name="test" value="value3"> Value 3

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: stackoverflow.com

Tags: radio-button radio-butt

Link to this answer
Share Copy Link

Contributed on Sep 02 2022

Prabin Kandel

0 Answers Avg Quality 2/10

selecting only one radio button

Comment

<!-- Just give all the radio buttons the same name. 
Html will then allow you to select only one. -->

<input type="radio" name="radAnswer" />

Popularity 10/10 Helpfulness 2/10 Language html

Source: stackoverflow.com

Tags: html

Link to this answer
Share Copy Link

Contributed on May 31 2021

Ashamed Addax

0 Answers Avg Quality 2/10

select only one option radio button

Comment

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div id="group">
    </div>

    <p id="output"></p>

    <script>
        const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];

        // generate the radio groups        
        const group = document.querySelector("#group");
        group.innerHTML = sizes.map((size) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`).join(' ');
        
        // add an event listener for the change event
        const radioButtons = document.querySelectorAll('input[name="size"]');
        for(const radioButton of radioButtons){
            radioButton.addEventListener('change', showSelected);
        }        
        
        function showSelected(e) {
            console.log(e);
            if (this.checked) {
                document.querySelector('#output').innerText = `You selected ${this.value}`;
            }
        }
    </script>
</body>

</html>
Code language: HTML, XML (xml)

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: www.javascripttutorial.net

Tags: radio-button radio-butt

Link to this answer
Share Copy Link

Contributed on Oct 23 2022

om waman

0 Answers Avg Quality 2/10

radio button only one selected javascript

Contents

More Related Answers

radio button only one selected javascript

Closely Related Answers

only one selected radio button

selecting only one radio button

select only one option radio button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.