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

最新推荐文章于 2024-05-11 22:47:01 发布

C...D

最新推荐文章于 2024-05-11 22:47:01 发布

阅读量2.6k

点赞数

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

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

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用HTML和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'})
			});