Radio button selected is always on

Question

I create this html page containing 5 radio button:

<div class='container-fluid'>

    <div class='row'>
        <div class='col' id='vaccine-selector-container' style='background-color:#FFC300;'>
            <div class='custom-control custom-radio custom-control-inline'>
                <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' checked>
                <label class='custom-control-label' for='rb-dtp' title='Vaccine against diphtheria, tetanus, pertussis'>DTP</label>
            </div>
            <div class='custom-control custom-radio custom-control-inline'>
                <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input'>
                <label class='custom-control-label' for='rb-mmr' title='Vaccine against measles, mumps and rubella'>MMR</label>
            </div>      
            <div class='custom-control custom-radio custom-control-inline'>
                <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input'>
                <label class='custom-control-label' for='rb-pol' title='Vaccine against poliomyelitis' title='Vaccine against poliomyelitis'>POL</label>
            </div>
            <div class='custom-control custom-radio custom-control-inline'>
                <input type='radio' id='rb-hib' name='vaccine-selector' class='custom-control-input'>
                <label class='custom-control-label' for='rb-hib'>HIB</label>
            </div>  
            <div class='custom-control custom-radio custom-control-inline'>
                <input type='radio' id='rb-hepB' name='vaccine-selector' class='custom-control-input'>
                <label class='custom-control-label' for='rb-hepB' title='Vaccine against hepatitis b'>HEP B</label>
            </div>
        </div>

        <div class='col' id='showCasesOrNotDivId' style='background-color:#FF5733;'>
        </div>
    </div> 

</div>

Now I'm trying to print what radio button is selected when user change selection.

var vaccineSelected = 'DTP';
d3.selectAll('input[name=vaccine-selector]').on('change', function() {
    vaccineSelected = this.value;
    console.log('vaccineSelected:', vaccineSelected); // on
});

Entire code HERE .

The result I get is always on . Why? What's the problem?

Answer 1

Your inputs don't set a value attribute and as MDN puts it :

If you omit the value attribute in the HTML, the submitted form data assigns the value "on" to the group.

Either set a value attribute :

<input type='radio' id='rb-dtp' name='vaccine-selector' class='custom- control-input' 
    value='DTP'
>

Or read a different attribute, for example id :

d3.selectAll('input[name=vaccine-selector]').on('change', function() {
    vaccineSelected = this.id;
    console.log('vaccineSelected:', vaccineSelected); // on
});