Value is not returning after click a toggle button in bootstrap 4

Question

I am using this Toggle Button. the UI is working fine. However, I have a problem with the jQuery whereby after clicking a Submit button, the only the first value is returning by clicking ON toggle.

    <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

The problem is here if ($('input[type="checkbox"]').prop('checked',true)){

You should change to be able to get value correctly like below.

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>