Mui列表单选mui-radio使用方法

C...D

于 2022-04-21 14:58:02 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/wargames_dc/article/details/124321893

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用HTML和JavaScript实现列表单选功能。通过`<form>`和`<input type='radio'>`元素创建单选选项，结合`mui-table-view-radio`类实现列表样式。同时，利用JavaScript监听事件，获取选中项的值并展示在弹框中，提供了清晰的用户交互体验。

摘要由CSDN通过智能技术生成

<div class="mui-card">
//列表单选Radio类型
				<form class="mui-input-group" id="CheckType1">
					<div class="mui-input-row mui-radio mui-left">
						<label>常规检查</label>
						<input name="radio1" type="radio" value="常规检查">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>负责人专检</label>
						<input name="radio1" type="radio" value="负责人专检" checked>
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>全部未检测项</label>
						<input name="radio1" type="radio" value="全部未检测项">
					</div>
				</form> 
//列表单选
				<ul class="mui-table-view mui-table-view-radio" id="CheckType">
					<!--
						mui-table-view-cell：内容页相当于item
						
					-->
					<li class="mui-table-view-cell">
						<a class=" mui-navigate-right">常规检查</a>
					</li>
					<li class="mui-table-view-cell mui-selected">
						<a class=" mui-navigate-right">负责人专检</a>
					</li>
					<li class="mui-table-view-cell">
						<a class=" mui-navigate-right">全部未检测项</a>
					</li>
				</ul>
								
			</div>

对应的JavaScript代码

            mui.init();
			document.getElementById('CheckType1').addEventListener('tap',function(){
				var ch=document.getElementsByName("radio1");
				for (var i = 0; i < ch.length; i++) {
					if (ch[i].checked) {
						//弹框提示
						mui.toast(ch[i].value+':'+ch[i].checked,{duration:'short'})
					} 
				}
				
			});
			
			document.getElementById('CheckType').addEventListener('selected',function(e){
				
				console.log(e.detail.el.innerText)
				var value=e.detail.el.innerText
				//弹框提示
				mui.toast('你的学历为'+value,{duration:'short'})
			});