<html>
<head>
<title>下拉框中的复选框</title>
</head>
<script>
function aa(obj,td_name)
{
var select_value=document.getElementById("where");
var td_value = document.getElementById(td_name);
if(obj.checked == true){
if(select_value.value.length>0){
select_value.value+="," + td_value.innerText;
}else{
select_value.value+=td_value.innerText;
}
}else{
if(select_value.value.indexOf("," + td_value.innerText + ",") != -1){
select_value.value = select_value.value.replace("," +
td_value.innerText,'');
}else if(select_value.value.indexOf("," + td_value.innerText) != -1){
select_value.value = select_value.value.replace("," +
td_value.innerText,'');
}else if(select_value.value.indexOf(td_value.innerText + ",") != -1){
select_value.value = select_value.value.replace(td_value.innerText + ",",'');
}else if(select_value.value.indexOf(td_value.innerText) != -1){
select_value.value = select_value.value.replace(td_value.innerText,'');
}
}
}
function bb(){
var obj = document.getElementById("ds");
if(obj.style.display==""){
obj.style.display="block";
}else if(obj.style.display=="none"){
obj.style.display="block";
}else if(obj.style.display=="block"){
obj.style.display="none";
}
}
function inDaohang(divname,obj){
var f = false;
while(obj.parentNode){
if(obj.name==divname){
return true;
}
obj = obj.parentNode;
}
return false;
}
function closeDaohang(e,divname,aname){
if(e.id!=aname && e.id!='where' && e.id.indexOf("td") ==-1&& e.id.indexOf("check") ==-1)
if(!inDaohang(divname,e)){
var a = document.getElementsByName(divname);
for(var i=0;i<a.length;i++){
a[i].style.display='none';
}
}
}
</script>
<style type="text/css">
body{
margin:0px;
SCROLLBAR-FACE-COLOR: #e0edfd;
SCROLLBAR-HIGHLIGHT-COLOR: #dfe8f4;
SCROLLBAR-SHADOW-COLOR: #2c7cda;
SCROLLBAR-3DLIGHT-COLOR: #2c7cda;
SCROLLBAR-ARROW-COLOR: #14549f;
SCROLLBAR-TRACK-COLOR: #eaf5fd;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #e0edfd;
}
.menu{
display:none;
}
input.blur{
border:1px solid #99BBE8;
background:#FFFFFF;
height:18px;
}
.tableborder{
border:solid 1px #CCCCCC;
border-collapse:collapse;
font-size:12px;
}
</style>
<body onclick="closeDaohang(event.srcElement||event.target,'ds','xx')">
<form>
<div id="xx">
<table>
<tr>
<td>
<input type="text" id="where" name="where" style="width:100px" onclick="bb()"
onblur="this.className='blur'" onfocus="this.className='focus'" class="blur" readonly>
</td>
</table>
</div>
<div id="ds" style="display:none;padding:0px 0px 0px 0px; margin:0;">
<table border="0" cellpadding="0" cellspacing="0" class="tableborder">
<tr><td id="td1"><input type="Checkbox" id="check1" name="idol02" value="123"
onclick="aa(this,'td1')">123</td></tr>
<tr><td id="td2"><input type="Checkbox" id="check2" name="idol02" value="232"
onclick="aa(this,'td2')">232</td></tr>
<tr><td id="td3"><input type="Checkbox" id="check3" name="idol02" value="3421"
onclick="aa(this,'td3')">3421</td></tr>
</table>
</div>
</form>
</body>
</html>
分享到：
相关推荐
首先，我们来探讨第一种实现方式——使用DIV控制的带有复选框的下拉列表。这种方式主要基于HTML和CSS，通过创建一个看起来像下拉列表的结构来模拟该功能。HTML部分会包含一组包裹在`<div>`标签中的`<input type="...
"WinForm带复选框的下拉表"就是这样一个功能，它允许用户在下拉列表中多选项目，通过复选框来标记他们的选择。 要实现这样的功能，首先你需要引用相关的DLL库。在.NET Framework环境下，通常我们可以使用System....
将两者结合，我们可以创建一个带复选框的下拉列表，提供更灵活的用户交互体验。这个项目就是基于JavaScript语言实现这一功能的。 在JavaScript中，我们首先需要创建一个HTML结构来模拟带复选框的下拉列表。`aa.htm`...
创建一个带复选框的下拉列表，首先你需要在ASP.NET项目中创建一个新的用户控件（User Control），这个用户控件通常会包含一个下拉列表（DropDownList）和一个隐藏的多选框列表（CheckBoxList）。下拉列表用于展示可...
### 复选框和下拉列表的提交与回显实现方式 #### 一、复选框的Ajax回显（list页面） 在Web开发中，为了提高用户体验，常常需要使用Ajax来实现实时更新数据的功能。这里以“书籍列表”为例，介绍如何利用Ajax技术...
本文将说明如何创建一个带全选复选框的列表控件。其效果如下图： 这个控件是由一个复选框（CheckBox）与一个 ListView 组合而成。它的操作逻辑： 当选中“全选”时，列表中所有的项目都会被选中；反之，取消选中...
接着，CSS部分主要负责美化下拉复选框的外观，比如调整其大小、颜色、边框等。例如： ```css #selectBox { width: 200px; height: 200px; border: 1px solid #ccc; } ``` 这将设置下拉框的宽度为200像素，高度为...
"下拉列表带复选框实现复选功能"是其中一种常见的需求，特别是在数据筛选、配置选择等场景。这个主题主要涉及到C#编程语言以及可能的前端技术如HTML、CSS和JavaScript，用于构建具有复选功能的下拉列表。 在C#环境...
本教程将深入探讨如何在QTableView中添加复选框，特别是在表头和第一列中实现这一功能，以增强用户界面的交互性。 首先，我们要明白QTableView的工作原理。它是基于QAbstractItemView类的，通过QStandardItemModel...
C# 实现WinForm带复选框的下拉列表DLL控件，ComboBox WinForm应用，是一个DLL的源码，实现窗口中带复选框的下拉列表，源码编译后生成UCComboBox.dll，你在项目中添加引用就可使用了。 运行环境：Visual Studio2010
本话题聚焦于一个特定的UI组件，即“带选择项CheckBox的下拉列表ComboBox控件”。这个控件结合了两种常见的界面元素：CheckBox和ComboBox，提供了一种更灵活的选择方式，特别是在需要用户从多个选项中进行多选时。 ...
在Asp.net Web应用程序开发中，"带复选框的下拉表"是一种常见的用户界面元素，它结合了下拉列表的紧凑性与复选框的多选功能，为用户提供了一种更直观、灵活的选择方式。这样的控件通常用于需要用户从多个选项中选择...
1. **空间效率**：相比于传统方式，下拉复选框能更有效地利用屏幕空间，避免长列表对页面布局的影响。 2. **用户体验**：提供更直观的交互，用户只需滚动列表而不是水平或垂直滚动整个页面。 3. **定制化**：通过...
在QT编程中，下拉框（QComboBox）和复选框（QCheckBox）是两种常见的用户界面元素。它们各自有着不同的功能，但在某些场景下，将两者结合使用可以提供更丰富的用户交互体验。本篇文章将深入探讨如何在QT中实现下拉框...
标题 "WEB页面下拉列表带复选框" 描述了一个常见的网页交互元素设计，它将传统的下拉列表与多选功能结合，用户可以在一个下拉菜单中看到多个可选项，并通过勾选复选框来选择多个值。这种设计在数据过滤、用户偏好...
它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和选择多个选项。以下是对这个主题的详细说明： 1. **下拉列表多选框**：传统的HTML `<select>` 元素只支持单选，但通过添加多选...
在特定的开发场景中，我们可能需要增强QTableView的功能，例如为表格中的每一行添加复选框或者下拉框控件，以提供更多的交互方式。这个过程涉及到Qt的自定义 delegate（委托）机制以及信号与槽的连接。 首先，我们...
本篇文章将详细讲解如何在 Laravel-Admin 中使用 "CheckboxTree" 组件，这是一个用于实现树状复选框功能的插件，特别适合处理涉及多级分类或权限分配的问题。 首先，我们需要了解 "CheckboxTree" 的基本概念。在 ...
在Web开发中，复选框（Checkbox）是一种常见的用户交互元素，用于让用户从多个选项中选择一个或多个。jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细...
下拉列表项中标题前面带有不同类型的小图标；后面是checkbox多选框；点击checkbox选择；与select2有些相似；弹又有些不一样 更多组件https://shop155629335.taobao.com/?spm=a230r.7195193.1997079397.2.diL9ud