HTML:

<!--mui的switch开关-->

            <div class="mui-content-padded">

                <h5>switch开关mui-active开启状态</h5>

                <div class="mui-switch mui-active">

                    <div class="mui-switch-handle"></div>

                </div>

            </div>

             <div class="mui-content-padded">

                <h5>mui-switch-blue:设置颜色</h5>

                <div class="mui-switch mui-switch-blue">

                    <div class="mui-switch-handle"></div>

                </div>

            </div>

            <div class="mui-content-padded">

                <h5>mui-switch-mini:无文字提示开关</h5>

                <div class="mui-switch mui-switch-blue mui-switch-mini">

                    <div class="mui-switch-handle"></div>

                </div>

            </div>

             <div class="mui-content-padded">

                <h5>男女性别开关</h5>

                <div class="mui-switch mui-switch-blue" id="gender">

                    <div class="mui-switch-handle"></div>

                </div>

                <div class="mui-content-padded">

                    <p class="mui-text-center" id="msg">这里是文字提示</p>

                </div>

            </div>

            <!--点击按钮获取信息-->

            <div class="mui-content-padded">

                <button id="btn-get-gender" class="mui-btn mui-btn-blue">获取性别</button>

            </div>

JS:

监听事件函数：

document.getElementById('btn-get-gender').addEventListener('tap',function(){

            //classList.contains('mui-active'):判断类名是否包含active，如果包含表示处于打开状态（ture）

                var gender=document.getElementById('gender').classList.contains('mui-active')

                console.log(gender)//ture/false

                if(gender==true){

                    document.getElementById("msg").innerHTML='女'

                }else{

                    document.getElementById("msg").innerHTML='男'

                }

            })