JavaScript切换Material Design Lite开关

Question

我的HTML中包含以下Material Design Lite开关，并且正在寻找一些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中进行了硬编码）。动态更改是否可行？

谢谢你的时间。我确实找到了这个作为参考，但是它使用的是CheckBox。

Answer 1

如果你参考mdl的源码，你会发现check和uncheck函数是绑定了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();
    }
});

要动态更新开关标签，代码可以如下所示。在页面加载时绑定输入的更改事件并在开/关状态更改时更新标签文本。

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

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