無法通過jQuery來獲取開關機Flipswtich當前狀態

This is my js fiddle 無法通過jQuery來獲取開關機Flipswtich當前狀態

代碼如下：

HTML：

<fieldset class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="xmonoffswitch"> 
    <label class="onoffswitch-label" for="xmonoffswitch"> 
     <div class="onoffswitch-inner"> 
      <div class="onoffswitch-active">Published</div> 
      <div class="onoffswitch-inactive">Unpublished</div> 
     </div> 
     <div class="onoffswitch-switch"></div> 
    </label> 
</fieldset > 
<div class="result"></div>

CSS：

.onoffswitch { 
    position: relative; width: 182px; 
    border: 0px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
} 
.onoffswitch-checkbox { 
    display: none; 
} 
.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; 
    border: 2px solid #FFF3E4; border-radius: 50px; 
} 
.onoffswitch-inner { 
    width: 200%; margin-left: -100%; 
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; 
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; 
} 
.onoffswitch-inner > div { 
    float: left; width: 50%; height: 41px; padding: 0; line-height: 41px; 
    font-size: 20px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: normal; font-style: italic; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 
.onoffswitch-inner .onoffswitch-active { 
    padding-left: 14px; 
    background-color: #F0B78B; color: #E67817; 
} 
.onoffswitch-inner .onoffswitch-inactive { 
    padding-right: 14px; 
    background-color: #F0B78B; color: #999999; 
    text-align: right; 
} 
.onoffswitch-switch { 
    width: 38px; height: 38px; margin:1.5px; 
    background: #A1A1A1; 
    border: 2px solid #FFF3E4; border-radius: 50px; 
    position: absolute; top: 0; bottom: 0; right: 137px; 
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; 
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
    background-color: #E67817; 
}

這基本上是一個開關按鈕，它有兩種狀態：發佈（開）和未發佈（關）。我想通過JQuery獲取當前選中的狀態，但無法獲取它。有人會告訴可能是什麼JQuery代碼片段？

來源

2012-10-20 ganesh

腳本應該是：

function getStatus(){ 
    // will return true in case of "ON" and false in case of "OFF" 
    return $("input#xmonoffswitch").is(":checked"); 
}

DEMO

希望這將幫助！

來源

2012-10-20 10:18:00

您可以通過檢查複選框的值，這樣

if($('.onoffswitch-checkbox').is(':checked')) 
    { 
     alert('Published'); 
    } 
    else 
    { 
     alert('Unpublished'); 
    }

檢查該演示，您複選框的狀態，當你切換按鈕

http://jsfiddle.net/v9zHV/4/

來源

2012-10-20 10:22:47 rahul

無法通過jQuery來獲取開關機Flipswtich當前狀態

回答

相關問題