基于表格布局的单选框复选框实例

逗神。

于 2021-11-24 19:12:30 发布

阅读量463

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/sinat_38406526/article/details/121521963

版权

本文介绍了如何使用JavaScript实现HTML中的radio单选框与checkbox复选框的联动功能，当用户选择某一权限时，相关选项会随之显示或隐藏。同时展示了如何通过事件监听控制页面内容的显示逻辑。

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

1、radio单选框、checkbox复选框，以及复选框选择时，底下复选框随之变化的功能，效果如下，

2、代码如下

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
		<meta charset="utf-8">
		<title></title>
		<style >
			.title{
				width: 110px;
			}
			.value{
				width: auto;
				padding:5px;
			}
			tr{
				padding: 0 px ;
				margin: 0 px ;
				font-size: 12px;
			}
			.table{
				width: 100%;
				height: 100%;
				margin: auto;
				border:1px solid #f8f8f8;
				background:#f8f8f8;
				padding: 3.125rem;
			}
		</style>
		<script>
			$(function(){
				//前端页面显示设置 .......开始
				$("#showEdit").hide();
				$("#showPrint").hide();
				$("#fileEdit").attr('disabled',true);
			});
			function submit(){
				var permissions = "";
				$("input:checkbox[name='permission']:checked").each(function(i){//获取复选框数据
				   permissions +=$(this).val();
				});
				var ObjType = $('input[name="ObjType"]:checked').val();//获取单选框数据
				var inputV = $("#inputId").val();//获取input框内容
			}
			
			//睡觉可以做的事情勾选页面显示 ...... 开始
			function showOrHideRead(obj){
				if(obj && $(obj).is(":checked")){
					$("#showReadOnly").show();
					$("#showEdit").hide();
					$("#showOpen").show();
					$("#fileEdit").attr('checked',false);
					$("#fileEdit").attr('disabled',true);
					//编辑下的所有清除
				}else{
					$("#fileEdit").attr('disabled',false);
					//取消选择打游戏的复选框
					$("#offline").attr('checked',false);
					$("#send").attr('checked',false);
					$("#filePrint").attr('checked',false);
					$("#showReadOnly").hide();
					$("#showOpen").hide();
				}
			}
			//打游戏可以做的事情勾选页面显示 ...... 开始
			function showOrHideEdit(obj){
				if(obj && $(obj).is(":checked")){
					$("#showEdit").show();
					$("#showOpen").show();
					$("#showReadOnly").hide();
					$("#fileRead").attr('checked',false);
					$("#fileRead").attr('disabled',true);
				}else{
					$("#fileRead").attr('disabled',false);
					//取消选择睡觉的复选框
					$("#offline").attr('checked',false);
					$("#send").attr('checked',false);
					$("#filePrint").attr('checked',false);
					$("#showEdit").hide();
					$("#showReadOnly").hide();
					$("#showOpen").hide();
				}
			}
			function showOrHidePrint(obj){
				if(obj && $(obj).is(":checked")){
					$("#showPrint").show();
				}else{
					$("#showPrint").hide();
				}
			}
		</script>
	</head>
	<body>
		<table class="table">
			<tr>
				<td class="title">
					input框:
				</td>
				<td class="value"><input type="text" id="inputId" name="inputName"></td>
			</tr>
			<tr>
				<td  class="title">
					radio单选:
				</td>
				<td class="value">
					<input type="radio" id="ObjType" name="ObjType" value="1">张三<input type="radio" id="ObjType" name="ObjType" value="2">李四
				</td>
			</tr>
			<tr>
				<td class="title">
					复选框:
				</td>
				<td class="value">
					<input id="fileRead" name="permission" value="S" type="checkbox" onclick="showOrHideRead(this);" checked="checked" > <label>睡觉</label> 
					<input id="fileEdit" name="permission" value="P" type="checkbox" onclick="showOrHideEdit(this);"> <label>打游戏</label><br>
				</td>
			
			<tr id="showReadOnly">
				<td class="title">
				</td>
				<td  class="value">
					<input id="offline" name="permission" value="L" type="checkbox"/><label>平躺</label>
					<input id="send" name="permission" value="C" type="checkbox"/><label>侧身</label>
					<input id="print" name="permission" value="B" type="checkbox" onclick="showOrHidePrint(this);"/><label>趴着</label>
				</td>
			</tr>
			
			<tr id="showEdit" >
				<td class="title"></td>
				<td  class="value">
					<input id="copy" name="permission" value="D" type="checkbox"/><label>饮料</label>
					<input id="restore" name="permission" value="M" type="checkbox"/><label>瓜子</label>
					<input id="offline" name="permission" value="N" type="checkbox"/><label>小零食</label>
				</td>
			</tr>
			<tr id="showOpen">
				<td class="title">
					次数1:
				</td>
				<td class="value"><input type="number" id="ReadTimes" name="ReadTimes"></td>
			</tr>
			<tr id="showPrint">
				<td class="title">
					次数2:
				</td>
				<td  class="value"><input type="number" id="PrintTimes" name="PrintTimes"></td>
			</tr>
			
			<tr>
				<td class="title">开始时间:</td>
				<td class="value">
					<input type="datetime" id="StartDate" name="StartDate">
				</td>
			</tr>
			<tr>
				<td class="title">结束时间:</td>
				<td class="value">
					<input type="text" id="EndDate" name="EndDate">
				</td>
			</tr>
			<tr><tr><tr><tr>
			<tr>
				<td class="title">
				</td>
				<td >
					<input type="button" value="提交" onclick="submit()">
				</td>
			</tr>
		</table>
	</body>
</html>