模仿京东移动端筛选样式，复选框

最新推荐文章于 2024-04-30 17:18:50 发布
最新推荐文章于 2024-04-30 17:18:50 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： html5 html css jquery 文章标签： 个性化复选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq358828690/article/details/79542045
版权
css 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
jquery
3 篇文章 0 订阅
订阅专栏
html5
2 篇文章 0 订阅
订阅专栏

直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset='UTF-8'>
		<title></title>
		<script type='text/javascript' src='../js/jquery-1.8.3.js'></script>
	</head>
	<style>
		.checkbox {
			width: 100px;
			height: 20px;
			background-color: #C8C7CC;
			color: #000;
			border-radius: 5px;
			margin-left: 10px;
			margin-top: 10px;
			text-align: center;
			padding: 6px;
		}
		
		.checkbox-click {
			width: 100px;
			height: 20px;
			border: 1px solid #F00;
			background-color: #FFF;
			color: #F00;
			border-radius: 5px;
			margin-left: 10px;
			margin-top: 10px;
			text-align: center;
			padding: 6px;
		}
		.checkbox p{
			margin-top: 0px;
		}
		.checkbox-click p{
			margin-top: 0px;
		}
	</style>
	<script type='text/javascript'>
		$(function() {
			no_click();
		});
		
		function no_click(){
			$('.checkbox').attr('value',false);
			$('.checkbox').click(function() {
				$("#"+this.id + " img").remove();
				var _img = document.createElement("img");
				_img.style.height = "12px";
				_img.style.float = "left";
				_img.style.marginTop = "4px"
				_img.src = "../images/tick.png";
				this.insertBefore(_img,this.childNodes[0]);  
				$(this).attr('class', 'checkbox-click') //
				$(this).attr('value',true);
				y_click();
			});
		}
		function y_click(){
			$('.checkbox-click').click(function() {
				$("#"+this.id + " img").remove();
				$(this).attr('value',false);
				$(this).attr('class', 'checkbox') //
				no_click();
			})
		}
		function trueorfalse(){
			var checkbox = $(".mui-content div")
			for (var i = 0; i < checkbox.length; i++) {
				alert(checkbox[i].getAttribute('value'));
			}
		}
	</script>

	<body>
		<div class='mui-content'>
			<div id='t' class='checkbox'>
				<p>已合格</p>
			</div>
			<div id='t1' class='checkbox'>
				<p>不合格</p>
			</div>
			<div id='t2' class='checkbox'>
				<p>未合格</p>
			</div>
		</div>
		<br />
		<button οnclick="trueorfalse()">看看选中没有</button>
	</body>
</html>

效果


qq358828690
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿京东商品筛选导航菜单
08-26
效仿京东商品筛选菜单样式，结果细微修改后的菜单筛选样式非常实用
js实现移动端编辑添加地址【模仿京东】
10-19
本篇文章主要介绍了js实现移动端编辑添加地址[模仿京东]的实例。具有很好的参考价值。下面跟着小编一起来看下吧
移动端复选框样式
ai2303444681的博客
08-25 2220
input[type='checkbox']{         -webkit-appearance: none;         border-radius: 100%;         background: url(./images/nocheck.png) no-repeat;         background-size: 100%;         height: 20px
H5 中时间预约筛选 利用Vant 组件中picker
m0_73035846的博客
04-30 174
今天要做一个上门洗衣预约时间的流程，就是用户在今天的日期可以进行选择某一刻时间段，但是如果说是现在上午10：30分 ，那么就不可以选10：30分之前的时间段和当前的时间段，都不可以进行选择，但是在当天看其他的日期，是可以选择任意时间段的，听着感觉简单，但是操作下来 还是听麻烦的，废话不多说，直接代码展示，大家可以赋值直接用的。
移动端复选框自定义样式及功能实现逻辑及代码
热门推荐
吴小迪的博客
08-29 3万+
每一项的input： <label> <input name="nex" type="checkbox" className={styles.visibleInput} checked={this.state.selectedIds.includes(obj.assetCardId)} onChange={() => {...
sumoselect插件实现手机端html复选框功能
会飞的鱼儿的博客
08-18 615
一、需求 最近在写手机端html时，需要用到一个复选框功能，在网上查了一下，发现了一个js插件sumoselect可以实现，具体效果如下： 二、实现方式 1、引入css和js <link href="../css/sumoselect.css" rel="stylesheet" type="text/css"> <script src="../js/jquery.sumoselect.js"></script> 2、html编写 <...
移动端复选框checkbox兼容性问题
Qing瓜君的博客
07-31 3123
需求 公司接了一个活动页的项目，然后就给我了，挺简单一个项目，开需求会时都很简单，然后客户那边给设计图，设计图一天给一张，还每天下午快下班才给，简直捉急。项目就是做两套样式，PC和移动端都有，还要PC端响应式，移动端适配，兼容主流浏览器以及移动端。 在做移动端的时候遇到了一个发现很晚的小bug，然后令我今晚现在还在家里敲代码，想着敲也是敲，不如顺手记录一下。 需求就是一个单选框，做成复选框的样式，...
带复选框三级树形菜单.rar
10-18
本项目名为"带复选框三级树形菜单"，是基于jQuery实现的一个简单但功能齐全的三级树形菜单，特别适合用于系统的下拉菜单功能。 首先，我们来理解树形菜单的概念。树形菜单是一种数据结构的可视化表示，它模仿了...
js实现iPhone界面风格的单选框和复选框按钮实例
11-27
在本实例中，我们将探讨如何使用JavaScript，特别是jQuery库，来实现模仿iPhone界面风格的单选框（radio）和复选框（checkbox）按钮。这个方法通过CSS样式和JavaScript事件处理来达到美观的效果，使传统的HTML表单...
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
带有复选框的JS树状菜单
01-24
"带有复选框的JS树状菜单"是一个常见的需求，它允许用户通过视觉层次结构来组织和选择数据。这种类型的菜单常用于文件管理器、设置面板或权限配置等场景。下面将详细介绍这个主题涉及的关键知识点。 首先，我们需要...
Android代码-一个漂亮的CheckBox控件
08-06
AnimCheckBox Screenshot Inspired By Dribbble Import to your project Gradle Add it in your build.gradle at the end of repositories repositories { // ... maven { url "https://jitpack.io" } } Add the dependency in the form dependencies { compile 'com.github.lguipeng:AnimCheckBox:1.0.1' } Maven jitpack.io https://jitpack.io com.github.lguipeng AnimCheckBox 1.0.1 Or Copy AnimCheckBox.java into your project. Usage In Layout File In Java File AnimCheckBox checkbox
HTML5移动端分类筛选菜单代码.zip
07-04
HTML5移动端分类筛选菜单代码是一款仿58同城网的筛选分类导航菜单功能下载。
京东商品筛选功能
03-12
仿京东产品筛选功能的实现 能够给使用者提供一些思路和方向
VUE实现移动端列表筛选功能
10-16
主要介绍了VUE实现移动端列表筛选功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
html5移动端分类筛选下拉导航菜单代码
11-11
html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码
html手机单选框,手机移动网页制作：表单输入框、单选框、复选框
weixin_28801391的博客
06-03 978
手机移动网页制作：表单输入框、单选框、复选框本文继前面讲到的WML语言中的文本标签和图像、链接后，接着讲WML语言中的表单内容。在Html中，表单内容包括输入框、单选框、复选框等等，WML也并不例外，仍然包含这三个元素，而且和Html中十分相似。六、输入框输入框可以让用户输入信息，起到交互效果。和Html中一样，都是使用标签：/p>"http://www.wapforum.org/DTD/w...
复选框全选
weixin_37858031的博客
05-09 103
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script src="js/jquery-1.11.0.min.js"></script> <script...
仿京东移动端地址选择组件mobilepc
08-12
仿京东移动端地址选择组件 mobile/pc
selenium 模仿移动端
最新发布
07-06
对于模拟移动端操作，虽然Selenium本身主要是针对桌面浏览器的，但它通过WebDriver协议可以与第三方库配合，如Appium这样的移动自动化测试框架一起工作。 Appium是一个开源的跨平台自动化测试工具，支持iOS和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值