layui radio单选框点击事件控制DIV内容的显示与隐藏

IF先生

于 2023-07-22 21:22:56 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/jineeq/article/details/131872751

版权

前端专栏收录该内容

3 篇文章

订阅专栏

这篇文章展示了如何使用HTML和layui框架的JavaScript代码，根据单选框（radio）的选择来控制相关div的显示或隐藏。当用户选择全部时，相关输入框（divid=boxN）会隐藏，而选择部分箱号时则显示输入框，让用户输入箱号范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据单选框的选择内容来显示或隐藏相关的div.
效果图：
在这里插入图片描述

html代码

<div class="layui-form-item" pane>
	<div class="layui-inline">
		<label class="layui-form-label">箱號</label>
		<div class="layui-input-block">
			<input type="radio" name="boxNume"  lay-filter="boxNume" value="0" title="全部" checked>
			<input type="radio" name="boxNume"  lay-filter="boxNume" value="1" title="部份箱號">
		</div>
	</div>
</div>
<div class="layui-form-item" id="boxN">
	<div class="layui-inline">
	  <label class="layui-form-label">箱號範圍</label>
	  <div class="layui-input-inline" style="width: 100px;">
		<input type="number" name="boxNume_s" id="boxNume_s" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
	  </div>
	  <div class="layui-form-mid">--</div>
	  <div class="layui-input-inline" style="width: 100px;">
		<input type="number" name="boxNume_e" id="boxNume_e" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
	  </div>
	</div>
</div>

JS代码

$('#boxN').hide();
form.on('radio(boxNume)',function(data){
	if(data.value=='0'){
		$('#boxN').hide();
	}else{
		$('#boxN').show();
	}
});