通过注册元素将HTML值转换为另一个值

Question

在谈论HTML时，我完全是新手，因此这对您来说很明显，但希望您能对我有所帮助。

我们有一个top-menu.html ，其中包含一些下拉菜单。 这些菜单之一是复选框菜单。 我必须在另一个HTML中获取值（及其更改事件），即index.html 。

有一个JS代码注册了index.html可以使用的元素。 仍然，我不知道如何检索复选框的值。

top-menu.html JS：

function build_component() {

    var template = (document._currentScript || document.currentScript)
           .ownerDocument.querySelector('#top-menu-template'); 
    var topMenu = Object.create(HTMLElement.prototype);

    topMenu.createdCallback = function() {
        // import template into
        var clone = document.importNode(template.content, true);
        this.appendChild(clone);
    };

    document.registerElement('page-top-menu', { prototype: topMenu });
}

好的，所以我可以在index.html使用<page-top-menu> 。 如何立即获取checkbox.checked值？

Answer 1

使用jQuery，您可以轻松地做到这一点

的HTML：

<input type="checkbox" value="0" class="check1">

jQuery：您可以使用本地存储来保存您的价值

$('.check1').on('change',function(){

       var val1 = $(this).val();
       localStorage.setItem("value", val1);
       alert(val1);

    }

要检索该信息，可以使用以下代码，如果您不想再删除它

var valnew = localStorage.getItem("value");
alert(valnew);
localStorage.removeItem("value");