jQuery实现div单选与多选

一、单选

1、思想：

先监听所有的div，点击某个div触发事件。如果被点击的div的border是红色，则remove；否则被点击的div的border不是红色，则遍历所有的div，去掉所有的div的红色border，点击了某个div，再给某个加上border。

2、js代码

js代码如下：

$(".container").on("click",this,function () {if($(this).hasClass("redBorder")){$(this).removeClass("redBorder");}else{$(".container").each(function () {$(this).removeClass("redBorder");})$(this).addClass("redBorder");}})

3、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div单选</title><style>.container{width: 100px;height: 100px;background-color: #E6E6E6;border:1px solid #cccccc;text-align: center;line-height: 100px;float: left;margin-left: 20px;}.redBorder{border: 1px solid red;}</style><script src="jquery-2.2.4.js" type="text/javascript"></script>
</head>
<body>
<div class="box"><div class="container">DIV</div><div class="container">DIV</div><div class="container">DIV</div>
</div>
</body>
<script>$(".container").on("click",this,function () {if($(this).hasClass("redBorder")){$(this).removeClass("redBorder");}else{$(".container").each(function () {$(this).removeClass("redBorder");})$(this).addClass("redBorder");}})
</script>
</html>

4、选中状态下点击，则去掉选中；未选中状态点击则变成唯一选中状态

二、多选

1、思想：

利用addClass（）、removeClass（）和toggleClass（）函数进行多选。

2、js代码：

$(".container").on("click",this,function () {$(this).toggleClass("redBorder");})

3、完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div单选</title><style>.container{width: 100px;height: 100px;background-color: #E6E6E6;border:1px solid #cccccc;text-align: center;line-height: 100px;float: left;margin-left: 20px;}.redBorder{border: 1px solid red;}</style><script src="jquery-2.2.4.js" type="text/javascript"></script>
</head>
<body>
<div class="box"><div class="container">DIV</div><div class="container">DIV</div><div class="container">DIV</div>
</div>
</body>
<script>$(".container").on("click",this,function () {$(this).toggleClass("redBorder");})
</script>
</html>

4、点击一次选中，再次点击去掉选中，可以同时选中多个。

jQuery实现div单选与多选相关推荐

vue div 单选、多选，多选且最多只能选择三个
一.先把准备工作做好 css .contilor{width: 50%;margin: 5% auto; } .box{display: flex;flex-wrap: wrap; } .item{p ...
jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现基础篇知识的实际应用. 纯CS ...
JQuery获取选中的元素（单选框复选框）及其他等
看注释 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件分类:代码日期:2016-08-02 点击(38,744) 下载(0) 来源:未知收藏下拉框美化插件经常见到,如之前介绍过的 Drop ...
好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
下拉选框如需样例和具体效果,请点击下面的连接. 好用的下拉选框(单选,多选,全选,清空和反选,及个种样式) 附件一:layui应用formselect layui.config({base: './ ...
vue单选，多选，多选的内容显示在页面可删除
vue做单选只能选一个 <template><div class="list"><span>只能选一个 ...
选下拉框的的值对应上传相应的图片_vue.js如何拿到多种类型表单值提交到后台，包含上传图片、单选、复选、文本框、下拉列表框...
2016-01-17 编辑更新 vue.js如何拿到多种类型表单值提交到后台,包含上传图片.单选.复选.文本框.下拉列表框下面的html包括多种类型的表单,其中包括图片上传,如何拿到这些表单的值提交 ...
jQuery 清除div内容
jQuery 清除div内容 $.ajax({ url: "SearchSN.aspx", data: "SN=" + $("#txtStorageS ...
vue 答题（单选，多选，判断）
这里是后台处理得计分,前台这是渲染题目,以及回显用户答得题答题后台数据格式 <ul><li v-for="(i, index1) in arrlist.pqList&q ...

jQuery实现div单选与多选

jQuery实现div单选与多选

一、单选

1、思想：

2、js代码

3、完整代码

4、选中状态下点击，则去掉选中；未选中状态点击则变成唯一选中状态

二、多选

1、思想：

2、js代码：

3、完整代码：

4、点击一次选中，再次点击去掉选中，可以同时选中多个。

jQuery实现div单选与多选相关推荐

最新文章

热门文章