JavaScript來切換材質設計精簡版交換機

我有以下的在我的HTML Material Design Lite switch並正在尋找一些JavaScript幫助。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，但它使用複選框了。

來源

2016-04-27 user2690151

如果你指的是MDL的source code，你會發現，檢查並取消功能與標籤標籤約束。

您可以指定一個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。答案有點晚了，但我希望它仍然有幫助。

來源

2016-11-28 09:35:05 ichbinblau

幹訓局處理程序未觸發MDL監聽器。我認爲你需要在#btn單擊處理程序與類似thsi年底觸發這種改變聽衆： $（「＃檢查輸入」）觸發（「變」）。 – Azeroth2b

JavaScript來切換材質設計精簡版交換機

回答

相關問題