JavaScript 切换 Material Design Lite 开关

Question

我有以下 Material Design Lite switch在我的 HTML 中，正在寻找一些 javascript 帮助。

<label  class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
    <span class="mdl-switch__label">USEREMAIL Subscribed</span>
</label>

点击开关后，我想添加:

1. 切换功能以将已选中的更新为未选中的 - 例如打开和关闭开关，但正在此处寻找 JavaScript 帮助。

2. 我确实希望将“已订阅”和“未订阅”的值作为显示在其旁边的文本显示(但硬编码在 html 中)。这样动态改变可行吗？

感谢您的宝贵时间。我确实找到了这个 as a reference , 但它使用的是 CheckBox。

Answer 1

如果你引用mdl的source code ，你会发现check和uncheck函数绑定(bind)了label标签。

您可以指定一个 id 来标记，如下所示:

<label id="check" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input type="checkbox" id="switch-1" class="mdl-switch__input"/>
    <span class="mdl-switch__label">Subscribed</span>
</label>
<input type="button" value="test switch" id="btn"/>

MDL 原生支持按钮点击时的开/关状态切换。您还可以通过另一个按钮控制状态。

$("#btn").click(function() {
    if($('#check').is('.is-checked')) {
        $('#check')[0].MaterialSwitch.off();
    }
    else {
        $('#check')[0].MaterialSwitch.on();
    }
});

要动态更新开关标签，代码可以像下面这样放置。在页面加载时绑定(bind)输入的更改事件，并在开/关状态更改时更新标签文本。

//toggle label
$('#check input').change(function(){
    if($(this).is(':checked'))
        $(this).next().text("Unsubscribed");
    else
        $(this).next().text("Subscribed");
});

这是 jsFiddle code .答案对你来说有点晚了，但我希望它仍然有帮助。