JavaScript 切换 Material Design Lite 开关

Question

我有一个Material Design Lite开关在我的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中硬编码）。这是否可以动态更改？

谢谢您的时间。我找到了这个参考资料，但它使用的是CheckBox。

- user2690151

Answer 1

如果您参考mdl的源代码， 您会发现检查和取消检查功能与标签标签绑定。 您可以像下面这样指定一个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代码。虽然答案有点晚，但我希望它仍然能够帮到你。

- ichbinblau

---

按钮处理程序没有触发 MDL 监听器。我认为您需要在 #btn 点击处理程序的末尾使用类似这样的内容来触发更改监听器： $("#check input").trigger("change"); - Azeroth2b

Answer 2

参考上述问题中的代码：

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

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

- Hafsal Rh

Answer 3

以下代码或许可以解决您的问题：

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

- avneet kaur