MDL：以编程方式设置javascript中组件的值/状态

我是java和html的绝对初学者。 我正在尝试从json变量加载html组件，在页面加载开始时，以及在收到websocket之后。 为了确保已加载连接和html，我使用以下方法：

connection.addEventListener('open', (event) => {
console.log('Connected: ');
if (document.readyState === 'complete') {
    console.log('complete: ');
    getDataConfig();     
}

getDataConfig（）填充json，必须设置收音机、文本和滑块，但不起作用

因此，我尝试通过一个调用函数DALE（）的简单按钮来实现（仅适用于收音机）：

}

这是单选按钮的html：

<div>
    <table class="mdl-data-table mdl-js-data-table">
        <thead>
            <tr>
                <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                        <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                        <span class="mdl-radio__label">NADA</span>
                    </label>
                </td>

                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                        <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                        <span class="mdl-radio__label">RPM</span>
                    </label>
                </td>

                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra1">
                        <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1" >
                        <span class="mdl-radio__label">VEL</span>
                    </label>
                </td>
            </tr>

        </tbody>
    </table>
</div>

-->
运输署{
对正内容：左；
文本对齐：左对齐；
宽度：100%；
}
tr{
对正内容：左；
文本对齐：左对齐；
宽度：100%；
}
.mdl-radio\u标签{
对正内容：左；
文本对齐：左对齐；
}
.mdl按钮{
宽度：100%；
}
达托巴拉
娜达
转速
水平
更新

升级： 正如ChrisG在上面的评论，这里有一条关于这一点的线索。 这项工作：

函数Dale（）{
document.getElementById（'DatoBarr10'）.parentNode.MaterialRadio.check（）；
document.getElementById（'Datobarra1'）.parentNode.MaterialRadio.uncheck（）；
document.getElementById（'Datobarra2'）.parentNode.MaterialRadio.uncheck（）；
}

运输署{
对正内容：左；
文本对齐：左对齐；
宽度：100%；
}
tr{
对正内容：左；
文本对齐：左对齐；
宽度：100%；
}
.mdl-radio\u标签{
对正内容：左；
文本对齐：左对齐；
}
.mdl按钮{
宽度：100%；
}
达托巴拉
娜达
水平
转速
山谷

问题是您的函数没有被调用，还是它们没有按照您的期望执行？您好！，函数被调用，但单选按钮的状态不变，这就是问题所在。如前所述，这应该可以工作。你能更新这个问题，使其包含一个按钮已连接但不起作用的示例片段吗？完成（希望没问题，这是一个需要学习的新东西！）在你的示例中，我觉得一切都很好。我想你被挂断的地方是css隐藏了你真正的单选按钮。如果更改样式以反映

输入的状态，我想您会看到想要的结果。您可以在这里了解更多：您还提到了其他组件。你也可以通过源代码来了解你将如何与它们交互，等
<div>
    <table class="mdl-data-table mdl-js-data-table">
        <thead>
            <tr>
                <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                        <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                        <span class="mdl-radio__label">NADA</span>
                    </label>
                </td>

                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                        <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                        <span class="mdl-radio__label">RPM</span>
                    </label>
                </td>

                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra1">
                        <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1" >
                        <span class="mdl-radio__label">VEL</span>
                    </label>
                </td>
            </tr>

        </tbody>
    </table>
</div>