layui好看的按钮（类似滑动按钮）代替单选框

<div class="layui-btn-group">
	<input hidden id ="checkStatus" value="${checkStatus}">
	<button type="button" id="checkStatus1" th:classappend="${checkStatus == '0' or checkStatus == 0?'layui-btn':'layui-btn layui-btn-primary'}" onclick="tabStatus(0)">按钮1</button>
	<button type="button" id="checkStatus2" th:classappend="${checkStatus == '1' or checkStatus == 1?'layui-btn':'layui-btn layui-btn-primary'}"  onclick="tabStatus(1)">按钮2</button>
	<button type="button" id="checkStatus3" th:classappend="${checkStatus == '2' or checkStatus == 2?'layui-btn':'layui-btn layui-btn-primary'}"  onclick="tabStatus(2)">按钮3</button>
 </div>

动态class使用的是：thymeleaf模板表达式，有个缺点是不能绑定参数，当参数值发生改变时class没变化。

function tabStatus(th) {
	$("#checkStatus").val(th);
	
	if(th==0){ //按钮1
		$("#checkStatus1").removeAttr('class').attr('class','layui-btn');
		$("#checkStatus2").removeAttr('class').attr('class','layui-btn layui-btn-primary');
		$("#checkStatus3").removeAttr('class').attr('class','layui-btn layui-btn-primary');
	}else if(th==1){ //按钮2
		$("#checkStatus2").removeAttr('class').attr('class','layui-btn');
		$("#checkStatus1").removeAttr('class').attr('class','layui-btn layui-btn-primary');
		$("#checkStatus3").removeAttr('class').attr('class','layui-btn layui-btn-primary');
	}else if(th==2){ //按钮3
		$("#checkStatus3").removeAttr('class').attr('class','layui-btn');
		$("#checkStatus2").removeAttr('class').attr('class','layui-btn layui-btn-primary');
		$("#checkStatus1").removeAttr('class').attr('class','layui-btn layui-btn-primary');
	}
	
}

效果图：