input用法总结（持续更新）

最新推荐文章于 2024-08-13 11:47:46 发布

白菜白哟

最新推荐文章于 2024-08-13 11:47:46 发布

阅读量813

点赞数

分类专栏：前端基础文章标签： input

本文链接：https://blog.csdn.net/Obstale_s/article/details/89397077

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上传图片

美化上传按钮：利用绝对布局
补充知识：标签的for属性，可以将它与一个表单控件联系起来，for的属性值同联系控件的id值相同

	<style>
		label.change-style{
			position: relative;
			display: inline-block;
			text-align: center;
			line-height: 30px;
		}
		#upload-file2{
			width:50px;
			position: absolute;
			top: 0;
			left: 0;
			opacity:0;
		}
		ul{
			list-style-type: none;
		}
		li{
			margin:15px  0 ;
		}
		//隐去没有图片时的空白块
		img[src=""]{
			opacity: 0;
		}
		.change-style img{
			width:100px;
			height: auto;
			vertical-align: top;
		}
	</style>
	<body>
		<div>
			<h2>上传照片[type="file"]并预览</h2>
			<ul>
				<li>
						<label for="upload-file">上传文件</label>
						<input type="file" accept="image/*" id="upload-file">
				</li>
				<li>
						<label class="change-style">上传文件
								<img src="">
								<input id="upload-file2" type="file" accept="image/png,image/jpeg,image/gif,image/jpg">
						</label>
				</li>			
			</ul>
	</div>
	<div>
			<h2>单选[type="radio"]</h2>
			<ul>
				<li>
						<label for="upload-file">上传文件</label>
						<input type="file" accept="image/*" id="upload-file">
				</li>
				<li>
						<label class="change-style">上传文件
								<img src="">
								<input id="upload-file2" type="file" accept="image/png,image/jpeg,image/gif,image/jpg">
						</label>
				</li>
			</ul>
		</div>

在这里插入图片描述

预览图片

// 使用FileReader对象读文件
	$(document).on('change','#upload-file2', function(){
		const fileUpload = $('#upload-file2').get(0);
		const picture = fileUpload.files[0];
		console.log(picture)
		if(window.FileReader){
			// 当前浏览器是否支持FileReader
			var reader = new FileReader();
			reader.onload = function(e){
				const pictureUrl = e.target.result;
				$('.change-style img').attr('src',pictureUrl);
			}
			reader.readAsDataURL(picture)
		}
	})

单选多选

	<ul>
			<li>
					<h2>单选[type="radio"]</h2>
					<label>你喜欢周杰伦吗
						<input name="radio" type="radio" checked value="1">喜欢
						<input name="radio" type="radio" class="like-check" value="2">喜欢的
					</label>
				</li>	
				<li>
					<label>你多大了? <input class="age" type="text" oninput="value=value.replace(/[^\d]/g,'')" checked ></label>	
				</li>
				<li>
						<h2>复选框[type="checkbox"]</h2>
						<label><input type="checkbox" class="all-check">全选</label>
						<label><input type="checkbox" name="all-check" value="1">1</label>
						<label><input type="checkbox" name="all-check">2</label>
						<label><input type="checkbox" name="all-check">3</label>
						<button>提交</button>
				</li>
			</ul>

<script>
//判断是否选中
	if($('.like-check')[0].checked){
		console.log($('.like-check').text())
	}
	// 判断是否全选
	const length = $('input[name="all-check"]').length;
	//点击全选按钮
	$('.all-check').on('change', function() {
		if($('.all-check')[0].checked){
			$('input[name="all-check"]').prop('checked',true);
		}else{
			$('input[name="all-check"]').prop('checked',false);	
		}	
	})
	// 点击下面复选框
	$('input[name="all-check"]').on('change', function() {
		let checkedLength = $('input[name="all-check"]:checked').length;
		if(length===checkedLength){
			// 用attr的话只在第一次点击的时候有用
			$('.all-check').prop('checked',true);
		}else{
			$('.all-check').prop('checked',false);
		}
	})
	
	$('button').click(function(){
	// 获取全选内容
		let checkedContent = [];
		$('input[name="all-check"]:checked').each(function(index,item){
			checkedContent.push($(this).parent().text());
		})
	})


</script>