近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接到这样的要求时我也蒙了,于是去网上查相关资料,查了好久,查不出个结果,只好自己用纯html css jq去做一个仿下拉列表中自带复选框的效果,代码如下,可直接复制去查看效果,

注:(以下代码为本人自己编写,只是一个小Demo,可以直接复制使用,但代码只是演示其效果和功能,告诉大家如何去写,所以界面可能没大家想要的那么漂亮!敬请谅解!0.0.)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #698906 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606; min-height: 22.0px }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #929151 }
span.s8 { color: #060606 }
span.s9 { color: #ad42ef }
span.s10 { color: #4a8a01 }
span.s11 { color: #698906 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{padding: 0;margin: 0;}

#wrap{

width: 500px;

height: 500px;

border: 1px solid blue;

margin: 100px auto;

}

#selectBoard{

width: 300px;

height: 20px;

border: 1px solid black;

border-radius: 5px;

position: relative;

margin: 30px auto;

}

#selectBoard ul{

width: 300px;

background: white;

position: absolute;

top: -10px;

left: -10px;

border: 1px solid red;

border-radius: 5px;

display: none;

}

#selectBoard ul li{

list-style: none;

}

#selectBoard ul li:hover{background: dodgerblue;}

#selectBoard img{

position: absolute;

right: 0;

top: 0;

width: 30px;

}

</style>

</head>

<body>

<div id="wrap">

<div id="selectBoard">

<ul>

<li><input type="checkbox" name="" id="" value="北京" />北京</li>

<li><input type="checkbox" name="" id="" value="上海" />上海</li>

<li><input type="checkbox" name="" id="" value="西安" />西安</li>

<li><input type="checkbox" name="" id="" value="石家庄" />石家庄</li>

</ul>

<span id="shuju"></span>

</div>

</div>

</body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

//定义一个空数组去接收value值

var arr = [];

//仿select的点击事件

$("#selectBoard").click(function(event){

var ev = event || window.event;

　　//阻止默认事件及封装

if (ev.stopPropagation) {

ev.stopPropagation();

}else{

ev.cancelable = true;

}

$("#selectBoard ul").css("display","block");

});

$(window).click(function(){

$("#selectBoard ul").css("display","none");

});

//监听checkbox的value值 改变则执行下列操作

$("input").change(function(){

if ($(this).prop("checked")) {

arr.push($(this).val()+",");

console.log(arr);

}else{

arr.shift($(this).val()+",");

}

$("#shuju").html(arr);

});

</script>

欢迎大家提出建议!!

　　

如何在select下拉列表中添加复选框?的更多相关文章

  1. 【Telerik】实现列表单元格中添加复选框，进行状态（是、否）判断

    前台界面: 需求:实现对每条细则是否必备进行判断,必备就勾选,否则不勾选. 首先:要保证列表GridView是可编辑的(IsReadOnly=false) 表格代码 其次:单元格的数据绑定要保证是双向 ...

  2. QListWidget的QComboBox下拉列表添加复选框及消息处理

    要在QComboBox下拉列表项中添加复选框,并进行消息处理,在网上搜索了很久没有找到太多有用的信息和实际的例子,但从中还是找到了一些提示性的资料,根据这些简短的介绍,最终实现了这个功能. QComb ...

  3. Jquery Datatable添加复选框，实现批量操作。

    最近一段时间,一直在写前端的东西,自己也不擅长,最近也有所长进,把工作中用到的一些前端知识整理一下,下次用到就不用再找了.这次主要是在datatable中添加复选框,然后实现批量操作的功能.因为是公司 ...

  4. asp.net，根据gridview 中checkbox复选框选中的行对数据库进行操作

    在asp.net中,使用checkbox,对gridview添加复选框. 多选数据行后,根据已选数据,对原数据进行多条语句查询. string sql = "Select * from 表 ...

  5. nodetree中 前面复选框禁用插件

    nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...

  6. Qt之QHeaderView添加复选框

    简述 前面分享了QTableView中如何添加复选框.本节主要介绍QTableView中的表头-QHeaderView添加复选框的功能,下面以水平表头为例,垂直表头类似! 简述 效果 QHeaderV ...

  7. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  8. dojo：为数据表格添加复选框

    一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...

  9. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

随机推荐

  1. 安装Java的IDE Eclipse时出现java.net.SocketException,出现错误Installer failed，show.log

    ERROR: org.eclipse.equinox.p2.transport.ecf code=1002 Unable to read repository at http://download.e ...

  2. HTML5 绘制简单圆形 loading. . . .

    现在有很多的 loading 组件 什么js 等等 闲来没事就写一个 H5的 loading  有很多的Loading 是一张张图片 js 控制的  有了 canvas的 出现 你就可以体验不同之处了 ...

  3. ios项目里扒出来的json文件

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

  4. UML大战需求分析——阅读笔记05

    最近看过几个程序员大学后一起创业,与大公司抢项目并成功逆袭的视频,感触颇深:第一.技术是关键:第二.有一群可靠并且技术超群的队友,在关键时刻不会掉链子:第三.善于部署谨慎周密的计划:第四.一流的口才+ ...

  5. Foreach 原理

    public class Person { private string[] friends = { "asf", "ewrqwe", "ddd&qu ...

  6. tp框架之AJAX

    实现一个AJAX添加并显示数据的例子 控制器 <?php namespace Home\Controller; use Think\Controller; class AjaxControlle ...

  7. POCO库——Foundation组件之核心Core

    核心Core: Version.h:版本控制信息,宏POCO_VERSION,值格式采用0xAABBCCDD,分别代表主版本.次版本.补丁版本.预发布版本: Poco.h:简单地包含了头文件Found ...

  8. GTest Google的一种白盒单元测试框架 开源项目

    GTest为google开源的白盒单元测试跨平台测试框架,含丰富的断言.类型参数化测试.死亡测试.以及其他的测试选项设置.文件保存等,以下将对该项目C++的实现进行简要的分析,作为学习记录备份. 基本 ...

  9. Win7 U盘安装Ubuntu16.04 双系统详细教程

    Win7 U盘安装Ubuntu16.04 双系统详细教程 安装主要分为以下几步: 一． 下载Ubuntu 16.04镜像软件: 二． 制作U盘启动盘使用ultraISO: 三． 安装Ubuntu系统: ...

  10. 感知机(perceptron)概念与实现

    感知机(perceptron) 模型: 简答的说由输入空间(特征空间)到输出空间的如下函数: \[f(x)=sign(w\cdot x+b)\] 称为感知机,其中,\(w\)和\(b\)表示的是感知机 ...