單擊引導程序 4 中的切換按鈕后，值未返回

Question

我正在使用這個Toggle Button 。 用戶界面工作正常。 但是，我對 jQuery 有一個問題，即在單擊“提交”按鈕后，唯一的第一個值是通過單擊“ ON切換返​​回。

    <label class="switch">
        <input id="toggle-event" type="checkbox" data-toggle="toggle">
        <div class="slider round">
            <span class="on" id="test_status" value="Active">ON</span>
            <span class="off" id="test_status" value="Inactive">OFF</span>
        </div>
    </label>
    <button type="button" id="btn_edit_device" class="btn btn-block btn-info">SUBMIT</button>

    $("#btn_edit_device").on("click",function(){

        if ($('input[type="checkbox"]').prop('checked',true)){ 
            status =  $("#test_status").val("Active"); 
            console.log("Active")
        }
        else { 
            status = $("#test_status").val("Inactive"); 
            console.log("Inactive")
        }

    });

Answer 1

問題就在這里if ($('input[type="checkbox"]').prop('checked',true)){

您應該更改為能夠正確獲取值，如下所示。

if ($('input[type="checkbox"]').prop('checked')){

 $("#btn_edit_device").on("click",function(){ if ($('input[type="checkbox"]').prop('checked')){ status = $("#test_status").val("Active"); console.log("Active") } else { status = $("#test_status").val("Inactive"); console.log("Inactive") } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label class="switch"> <input id="toggle-event" type="checkbox" data-toggle="toggle"> <div class="slider round"> <span class="on" id="test_status" value="Active">ON</span> <span class="off" id="test_status" value="Inactive">OFF</span> </div> </label> <button type="button" id="btn_edit_device" class="btn btn-block btn-info">SUBMIT</button>