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

select only one option radio button

Add Answer

om waman answered on December 10, 2020 Popularity 9/10 Helpfulness 1/10

answer select only one option radio button

related html radio only one checked

related only one selected radio button

related selecting only one radio button

related radio button only one selected javascript

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 select whatever

Link to this answer
Share Copy Link

Contributed on Oct 23 2022

om waman

0 Answers Avg Quality 2/10

Closely Related Answers

html radio only one checked

Comment

<!--Just manke both names equal -->
<input type="radio" name="options" id="1"/>
<input type="radio" name="options" id="2"/>

Popularity 10/10 Helpfulness 6/10 Language html

Source: Grepper

Tags: checked

Link to this answer
Share Copy Link

Contributed on Dec 10 2020

Graceful Gnu

0 Answers Avg Quality 2/10

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

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 j

Link to this answer
Share Copy Link

Contributed on May 18 2022

Ahmed Samir

0 Answers Avg Quality 2/10

select only one option radio button

Contents

More Related Answers

select only one option radio button

Closely Related Answers

html radio only one checked

only one selected radio button

selecting only one radio button

radio button only one selected javascript

Grepper

Documentation

Social

Legal

Contact

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