MUI H5+常见控件的使用之开关

开关 比如已婚/未婚

HTML

<label style="width:40%;">婚姻状况</label>
<div id="Marriage" class="mui-switch mui-switch-blue " data-on="已婚" data-off="未婚">
	<div class="mui-switch-handle "></div>
</div>

var marriage = document.getElementById('Marriage'); //婚姻状况

Get

var marriageValue = 0;;
marriage.addEventListener('toggle', function(event) {
	//event.detail.isActive 可直接获取当前状态
	if(event.detail.isActive) {
		marriageValue = 1;
	} else {
		marriageValue = 0;
	}
});

Set

if(result.userInfo.Marriage == 1) {
	marriage.classList.add('mui-active');//结婚
}