Layui中的监听

最新推荐文章于 2024-05-14 09:38:54 发布

小彩虹冲鸭

最新推荐文章于 2024-05-14 09:38:54 发布

阅读量618

点赞数

分类专栏： # Layui 文章标签： js layui 监听单选框开关

本文链接：https://blog.csdn.net/qq_25844803/article/details/112306717

版权

Layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

监听单选框

预期效果：监听一个单选框，当点击通过时，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>

小彩虹冲鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layui中的监听

目录监听单选框监听开关监听单选框预期效果：监听一个单选框，当点击通过时，input显示“通过”；点击不通过时，显示“不通过”。代码如下 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>监听单选框</title> <link rel="stylesheet" href="../static/css/layui.css"> <
复制链接

扫一扫

专栏目录