Question

<html>
<body>

<script language="javascript">
window.onload=function(){

var container = document.getElementById('container'),
    template = `'<li>\
        <input type="checkbox">\
    </li>\
    <li>\
        <input type="checkbox">\
    </li>\
    <li>\
        <input type="checkbox">\
    </li>';`

container.onchange = function(e) {
    var event = e || window.event,
        target = event.srcElement || event.target;

    if( target.checked && target.parentNode.getElementsByTagName('div').length === 0 ) {
        var ul = document.createElement('div');
        ul.innerHTML = template;
        target.parentNode.appendChild(ul);
    } else {
        var ul = target.parentNode.getElementsByTagName('div')[0];
        target.parentNode.removeChild(ul);
    }
};

}

</script>

    <ul id="container">
    <li>
        <input type="checkbox">
    </li>
    <li>
        <input type="checkbox">
    </li>
    <li>
        <input type="checkbox">
    </li>
</ul>


</body>
</html>

我需要将此程序从checkbox更改为div元素。实际上，当单击一个复选框时，会在其下方创建三个复选框，依此类推，如果取消选中父复选框，则会删除所有子复选框。现在我需要将此复选框元素更改为普通标签元素。所以当点击一个标签时，它下面会出现一个三个标签..怎么做........

如何从checkbox到label元素进行此更改

0 个答案: