无法通过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当前状态

回答

相关问题