Выбранный переключатель всегда включен

Question

Я создаю html-страницу, содержащую 5 радиокнопок:

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

Теперь я пытаюсь напечатать, какая радиокнопка выбрана, когда пользователь выбирает изменение.

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

Весь код ЗДЕСЬ .

Результат, который я получаю, всегда on.Зачем?В чем проблема?

Answer 1

Ваши входные данные не устанавливают атрибут value и как MDN устанавливает его :

Если вы опустите атрибут значения в HTML, отправленные данные формы будут назначенызначение "on" для группы.

Либо установить атрибут value:

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

, либо прочитать другой атрибут, например id:

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