Question

按getmdl.io，复选框元素为：

#d{
padding:20px

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.deep_purple-blue.min.css" rel="stylesheet"/>
<div id="d">
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
 <span class="mdl-checkbox__label">Checkbox</span>
</label>

我试着用js

添加这个元素

function addCB(){
  var cb = document.createElement('div');
  cb.innerHTML = `<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
 <span class="mdl-checkbox__label">Checkbox</span>
</label>`;
  document.getElementById('d').appendChild(cb);
}

#d{
padding:20px

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.deep_purple-blue.min.css" rel="stylesheet"/>
<div id="d">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect " onClick="addCB()">Add checkbox</button>

但设计不起作用，为什么，谁能帮助我？

Answer 1

对于MDC-Web，不推荐使用FYI MDL，但是如果必须使用它，则可以像任何其他复选框一样获取它，即document.getElementByID（“checkbox1”）。checked选中它返回一个布尔值。

Answer 2

我设法通过使用以下两行来获得您想要的效果：

componentHandler.upgradeDom('MaterialCheckbox');
componentHandler.upgradeAllRegistered();

以下是有关componentHandler的一些信息。

这是一个有效的pen。

如何创建一个mdl复选框元素

2 个答案: