<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card">
//单选框 控制输入框---------------------
<div class="layui-input-block">
<label class="think-radio notselect">
<input type="radio" name="status" value="1" lay-ignore>通过
<input type="radio" name="status" value="2" lay-ignore>不通过
</label>
</div>
<div class="layui-form-item" id="div-reason">
<label class="layui-form-label">
<b class="color-green">理由</b><br><span class="nowrap color-desc">Reason</span>
</label>
<div class="layui-input-block">
<input type="text" name="reason" required value="" placeholder="请输入" class="layui-input">
<p class="help-block">通过理由</p>
</div>
</div>
//复选框 控制输入框----------------------------------
<div class="layui-input-block">
<label class="think-checkbox notselect">
<input type="checkbox" id="checkYaml" name="status2" value="1" lay-ignore>允许
</label>
</div>
<div class="layui-form-item" id="branch_build_div">
<label class="layui-form-label">
<b class="color-green">允许类型</b><br><span class="nowrap color-desc">AllowExts</span>
</label>
<div class="layui-input-block">
<input type="text" name="allow_exts" required value="" placeholder="请输入" class="layui-input">
<p class="help-block">设置系统</p>
</div>
</div>
//---------------------------------------------------
<div class="layui-form-item text-center">
<button class="layui-btn" type="submit">提交</button>
</div>
</form>
<script>
$(function () {
//先隐藏输入框两个输入框
$('#div-reason').hide();
$("#branch_build_div").hide();
//单选框 控制输入框---------------------
$('input:radio[name="status"]').change(function () {
var v = $(this).val();
if (v == '1') {
$('#div-reason').show();
} else {
$('#div-reason').hide();
}
});
//复选框 控制输入框----------------------------------
$("#checkYaml").change(function () {
if ($("#checkYaml").prop("checked")) {
$("#branch_build_div").show();
} else {
$("#branch_build_div").hide();
}
});
})
</script>
表单中通过单选框或复选框控制输入框的显示和隐藏
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2900.html
发布的文章
探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点
2024-03-15 11:03:24
jQuery-从左到右、从右到左
2024-03-15 11:03:23
jquery-table2excel,进行导出excel
2024-03-15 11:03:22
前端基础(HTML、CSS、JS、jQuery)
2024-03-15 11:03:10
JQuery异步加载表格选择记录
2024-03-15 11:03:09
jQuery —— JavaScript 库
2024-03-15 10:03:48
HTML中的jquery
2024-03-15 10:03:48
「jQuery系列」jQuery Cookie插件功能介绍
2024-03-15 10:03:47
Supersized - Full Screen Background jQuery Slideshow Plugin
2024-03-15 10:03:47
JavaScript split() 方法详解
2024-03-15 10:03:47
大家推荐的文章