关于 layui 的 几个问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25354709/article/details/88548653

1、关于radio的精确匹配

同一个页面，有好几个radio表单，然后点击其中一个，会影响其他的radio。
因为没有精确匹配。
解决方案：
使用lay-filter=“任意字符”， 来精确匹配。

<div class="sex">
	<input type="radio" name="gender" value="男" title="男" id="gender1" lay-filter="gender">
	<input type="radio" name="gender" value="女" title="女" id="gender2" lay-filter="gender">		
</div>

<div class="jiao">
    <span>是否缴费：</span>
    <input type="radio" name="ispayment" value="是" title="是" checked="" id="ispayment1"
    lay-filter="ispayment" >
    <input type="radio"  name="ispayment" value="否" title="否" id="ispayment2"
    lay-filter="ispayment" >
</div>

<div class="laiyuan">
	<span>
		<span style="color: red;">*</span>来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源：
	</span>
																		
	<input type="radio" class="radio_" name="source" id="laiyuan" value="渠道" title="渠道" lay-filter="source" >
	<input type="radio" class="radio_" name="source" id="laiyuan1" value="直招" title="直招" lay-filter="source" >	
	<input type="radio" class="radio_" name="source" id="laiyuan2" value="二次开发" title="二次开发" lay-filter="source" >	
</div>

//->监听性别
form.on('radio(gender)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});

//->监听是否缴费
form.on('radio(ispayment)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});


//->监听来源			
form.on('radio(source)', function(data){			
	if (data.value == '渠道') {				
		$('#ququ').css({'display':'block'});
	} else {
		$('#ququ').css({'display':'none'});
		//->清空表单内容
		$('input[name="sourcename"]').val('');
	}
  	console.log(data.value); //被点击的radio的value值
});  

二、layui的radio属性或别的别的属性没显示出来的解决方法

文档：https://www.layui.com/doc/modules/form.html#render
必须给表单体系所在的父元素加上 class=“layui-form”。

<div class="layui-form" lay-filter="test1">
  <form>
	<div class="sex">
		<input type="radio" name="gender" value="男" title="男" id="gender1" lay-filter="gender">
		<input type="radio" name="gender" value="女" title="女" id="gender2" lay-filter="gender">		
	</div>
  </form>
</div>

layui.use('form', function(){
  var form = layui.form;
  
  //->各种基于事件的操作，下面会有进一步介绍
  //->重新渲染raido
  form.render('radio', 'test1');
});

注意： 重新渲染radio，必须放在获取数据之后。
示例：

$.ajax({
	type: "post",
	url: baseurl + "index.php/report/getScopeById",
	data: queryData,
	dataType: 'json',
	success: function (result) {
		console.log(result);
		//->拼接数据
		//->性别
		if (obj.gender == "男") {
			//->选中第一个
			$('#gender1').attr("checked", "checked");
			$('#gender2').removeAttr("checked");
		} else {
			$('#gender1').removeAttr("checked");
			$('#gender2').attr("checked", "checked");
		}

		//->重新渲染
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //->各种基于事件的操作，下面会有进一步介绍
		  //->重新渲染raido
		  form.render('radio', 'test1');
		});		
										
	}
});