切換按鈕切換時顯示消息

我正在使用Bootstrap Switch切換切換開關中的複選框。切換按鈕切換時顯示消息

現在我想顯示不同的消息，根據開關是否打開或關閉。聽起來很簡單...但我似乎無法使它工作:(

我的HTML：

<div class="approve-delivery"> 
    <label for="config-email" class="control-label col-xs-5"> 
    Do you want to send out email? 
    </label> 
    <input type="checkbox" id="config-email" onclick="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/> 
</div> 

<div class="email-config-msg"> 
    <p id="enable-msg"> 
     All emails will be sent. 
    </p> 
    <p id="disable-msg"> 
     No email will be sent.<br/> 
     Please remember, you must turn email ON again if you want emails to 
     be sent during this login session. 
    </p> 
</div>

而且我的jQuery：

function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) { 
    var check_box = document.getElementById(checkId) 
    var first_alert = document.getElementById(firstCommentId); 
    var second_alert = document.getElementById(secondCommentId); 

    if (check_box.checked == true) { 
    first_alert.style.visibility = "visible"; 
    first_alert.style.display = "inline-block"; 
    second_alert.style.visibility = "hidden"; 
    second_alert.style.display = "none"; 
    } else { 
    first_alert.style.visibility = "hidden"; 
    first_alert.style.display = "none"; 
    second_alert.style.visibility = "visible"; 
    second_alert.style.display = "inline-block"; 
    } 
}

這是我的工作JSFiddle

同樣，這是我想要做的：

選中/取消，正確的消息應該在頁面上顯示時，它加載
那麼如果複選框的選擇發生變化時，它應該顯示相應的消息

我希望我有道理（英語不是我的第一語言）！如果問題重複，我也很抱歉，請提供Q/A的網址。

預先感謝您的時間和幫助！

來源

2015-09-30 AlwaysANovice

此代碼的問題是，它嘗試創建元素的onClick事件比onChange。如果將其更改爲onChange，它會正常工作。

<input type="checkbox" id="config-email" 
    onChange="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>

根據在啓動本身上顯示消息，在document.ready函數中使用相同的參數調用此函數。

更新到您的評論：

以下修改後的代碼完全在你的提琴。

$(document).ready(function() { 
    $("input#config-email").bootstrapSwitch({ 
    onText: 'Enable', 
    onColor: 'primary', 
    offText: 'Disable', 
    offColor: 'warning', 
    size: 'normal' 
    }); 

    ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg') 
});

來源

2015-09-30 05:18:43

我試着打在'的document.ready function'的功能，但它不工作。你能檢查我做錯了嗎？ https://jsfiddle.net/hiWorld/a29bc42b/2/ – AlwaysANovice

您的代碼正在工作，只需將其替換爲複選框上的事件即可進行更改。由於當您在複選框上選中/取消選中時觸發更改事件。

<input type="checkbox" id="config-email" 
    onchange="ToggleSwitchMessage('config-email', 'enable-msg', 'disable-msg')" checked/>

來源

2015-09-30 05:15:11

我是一個愚蠢的：< 太感謝你了用於捕獲錯誤：d – AlwaysANovice

切換按鈕切換時顯示消息

回答

相關問題