选中的单选按钮总是打开的。

Question

我创建了包含5个单选按钮的html页面：

<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中的value属性，则提交的表单数据将值"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
});