监听单选框
预期效果:监听一个单选框,当点击通过时,input显示“通过”;点击不通过时,显示“不通过”。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听单选框</title>
<link rel="stylesheet" href="../static/css/layui.css">
</head>
<body>
<form class="layui-form" action="" method="post" onsubmit="return false" lay-filter="sample_check_form">
<div class="layui-form-item">
<label class="layui-form-label">审核结果</label>
<div class="layui-input-block">
<input type="radio" lay-filter="result" name="result" value="1" title="<b><span style='color:green;'>通过</span></b>" >
<input type="radio" lay-filter="result" name="result" value="-1" title="<b><span style='color:red;'>不通过</span></b>">
</div>
</div>
现在的操作结果:<input type="text" id="result_value" />
</form>
<script type="text/javascript" src="../static/layui.js"></script>
<script type="text/javascript" >
layui.use(['form'],function (){
var form = layui.form;
// 监听 单选框
form.on('radio(result)', function (data) {
if(data.value == '1'){
document.getElementById("result_value").value = "通过";
}else{
document.getElementById("result_value").value = "不通过";
}
});
});
</script>
</body>
</html>
监听开关
预期效果:监听一个开关,当点击同意时,input显示“我同意”;点击拒绝时,显示“我拒绝”。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听开关</title>
<link rel="stylesheet" href="../static/css/layui.css">
</head>
<body>
<form class="layui-form" action="" method="post" onsubmit="return false" lay-filter="sample_check_form">
<div class="layui-form-item" pane="">
<label class="layui-form-label">入赘我王家</label>
<div class="layui-input-block">
<input type="checkbox" checked="" name="res" lay-skin="switch" lay-filter="filter_switch" title="入赘我王家" lay-text="同意|拒绝">
</div>
</div>
操作结果:<input type="text" id="result_value" />
</form>
<script type="text/javascript" src="../static/layui.js"></script>
<script type="text/javascript" >
layui.use(['form'],function (){
var form = layui.form;
//监听 指定开关
form.on('switch(filter_switch)', function(data){
if(this.checked){
document.getElementById("result_value").value = "我同意";
}else{
document.getElementById("result_value").value = "我拒绝";
}
});
});
</script>
</body>
</html>