layui进行input动态渲染，是失效的，隐藏的input也会展示到页面上，虚心请教
layui进行input动态渲染，是失效的，隐藏的input也会展示到页面上，虚心请教
代码
="float: left" id="valid" class="layui-input-block">
<script>
layui.use('form', function () {
var form = layui.form;
var $ =layui.jquery;
// form.render();
form.on('select(hideoption)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.elem.id); //得到select id 属性
console.log(data.elem.name); //得到select name 属性
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
var res =data.value;
if(res==="2"){
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="none";
var checks = document.getElementsByName("correctAnswer");
checks[0].style.display="none";
checks[1].style.display="none";
checks[2].style.display="none";
checks[3].style.display="none";
checks[4].style.display="none";
checks[5].style.display="none";
checks[6].style.display="none";
checks[7].style.display="none";
checks[8].style.display="block";
checks[9].style.display="block";
console.log(checks[2].style.display);
}else if(res=="1"){
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="block";
var checks = document.getElementsByName("correctAnswer");
checks[0].style.display="block";
checks[1].style.display="block";
checks[2].style.display="block";
checks[3].style.display="block";
checks[4].style.display="none";
checks[5].style.display="none";
checks[6].style.display="none";
checks[7].style.display="none";
checks[8].style.display="none";
checks[9].style.display="none";
console.log(checks[2].style.display);
}else if(res == '2') {
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="block";
var checks = document.getElementsByName("correctAnswer");
checks[0].style.display="none";
checks[1].style.display="none";
checks[2].style.display="none";
checks[3].style.display="none";
checks[4].style.display="block";
checks[5].style.display="block";
checks[6].style.display="block";
checks[7].style.display="block";
checks[8].style.display="none";
checks[9].style.display="none";
console.log(checks[2].style.display);
}
});
});
function selectCheckOne(obj){
var checks = document.getElementsByName("sex");
console.log(checks);
console.log(obj.checked);
if(obj.checked){
for( var i=0;ilength ;i++){
checks[i].checked=false;
}
obj.checked=true;
}else{
for( var i=0;ilength;i++){
checks[i].checked=false;
}
}
}
script>
运行结果及报错内容
前端会全部展示出来
每个项放到一个容器中，直接设置容器的显示隐藏。layUI模拟出来的UI不会根据原始的dom的display来设置模拟的ui的显示隐藏的。而且可以给分组添加下特殊样式，直接显示对应的分组就行了~
如果题主要用layUI，需要学下jquery。这个框架居于jquery的。简单示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>测试 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {
padding: 20px;background:#000;
}
.hide{display:none}
#valid{color:#fff}
</style>
</head>
<body>
<form class="layui-form" method="get">
<div class="layui-input-inline">
<select lay-filter="hideoption" name="hideoption" lay-verify="required" lay-search="">
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3">第三组</option>
</select>
</div>
<div id="valid" class="layui-input-block">
<div class="layui-form-item group1">
<input type="checkbox" name="correctAnswer" value="A">A
</div>
<div class="layui-form-item group1">
<input type="checkbox" name="correctAnswer" value="B">B
</div>
<div class="layui-form-item group1">
<input type="checkbox" name="correctAnswer" value="C">C
</div>
<div class="layui-form-item hide group2">
<input type="radio" name="correctAnswer" value="A">A
</div>
<div class="layui-form-item hide group2">
<input type="radio" name="correctAnswer" value="B">B
</div>
<div class="layui-form-item hide group2">
<input type="radio" name="correctAnswer" value="C">C
</div>
<div class="layui-form-item hide group3">
<input type="radio" name="correctAnswer" value="对">对
</div>
<div class="layui-form-item hide group3">
<input type="radio" name="correctAnswer" value="错">错
</div>
</div>
</form>
<script src="../dist/layui.js"></script>
<script>
layui.use('form', function () {
var form = layui.form;
var $ = layui.jquery;
form.on('select(hideoption)', function (data) {
console.log(data)
$('#valid .layui-form-item').hide().filter('.group' + data.value).show();
})
});;
</script>
</body>
</html>
layui 的input是模拟出来的，而且layui的表单应该是放到form中的，你仔细看一下文档把
贴你的完整代码出来吧，拿你的html测试，并没出现你说的所有元素都显示出来了。另外，描述下你想要什么效果。