JavaScript 切换 Material Design Lite 开关答案

【问题标题】：JavaScript to Toggle Material Design Lite SwitchJavaScript 切换 Material Design Lite 开关
【发布时间】：2016-08-22 12:05:25
【问题描述】：

我的 HTML 中有以下 Material Design Lite switch 并正在寻找一些 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>

点击开关后，我想添加：

切换功能以将选中更新为未选中 - 就像打开和关闭开关一样，但正在此处寻求 JavaScript 帮助。
我真的希望将“已订阅”和“未订阅”的值作为文本显示在它旁边，如图所示（但在 html 中硬编码）。这是否可行动态更改？

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

【问题讨论】：

标签： javascript jquery html material-design

【解决方案1】：

如果你参考mdl的source code，你会发现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 code。答案对你来说有点晚了，但我希望它仍然有帮助。

【讨论】：

btn 处理程序未触发 MDL 侦听器。我认为您需要在#btn 点击处理程序的末尾触发更改侦听器，使用类似 thsi: $("#check input").trigger("change");

【解决方案2】：

下面的代码或许能解决你的问题：

var isChecked = $('#switch-1').is(':checked');
if(isChecked) {
    alert("subscribed");
} else {
    alert("not subscribed");
}

【讨论】：

【解决方案3】：

参考above question中的代码：

var myCheckbox = document.getElementById('switch-1');

myCheckbox.parentElement.MaterialSwitch.off();
…
myCheckbox.parentElement.MaterialSwitch.on();

【讨论】：