版权声明:本文为博主原创文章,未经博主允许不得转载。 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>来 源:
</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');
});
}
});