-
2021-06-11 03:15:24
Tim Medora..
96
此示例将从左到右移动项目(一个或多个),然后再移回.无论在右侧选择了哪个项目,都将更新右侧的文本框.
我们正在使用这些元素:
select
input type="button"
input type="text"
陷害者:
div
section
采用简单的CSS设计.功能由JavaScript提供.
我正在使用jQuery库让事情变得更容易一些.这也可以使用纯JavaScript完成.
$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$("#leftValues").append(selectedItem);
});
$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected");
$("#rightValues").append(selectedItem);
});
$("#rightValues").change(function () {
var selectedItem = $("#rightValues option:selected");
$("#txtRight").val(selectedItem.text());
});
SELECT, INPUT[type="text"] {
width: 160px;
box-sizing: border-box;
}
SECTION {
padding: 8px;
background-color: #f0f0f0;
overflow: auto;
}
SECTION > DIV {
float: left;
padding: 4px;
}
SECTION > DIV + DIV {
width: 40px;
text-align: center;
}
1
2
3
棒极了.非常感谢您的时间和帮助. (3认同)
更多相关内容 -
下拉多选框，下拉多选框，input下拉弹出复选框多选
2020-08-04 14:48:13下拉多选框，下拉多选框，input下拉弹出复选框多选，多选下拉框 -
Js实战之多选框
2021-10-08 14:51:57关于多选框的一道小练习 题目要求： 1、点击全选框时，全部多选框（足球、篮球、羽毛球、乒乓球）选中，全选/全不选框选中； 2、点击全不选框时，全部多选框不选中，全选/全不选框不选中； 3、点击反选框时，选中的...展开全文关于多选框的一道小练习
题目要求：
1、点击全选框时，全部多选框（足球、篮球、羽毛球、乒乓球）选中，全选/全不选框选中；
2、点击全不选框时，全部多选框不选中，全选/全不选框不选中；
3、点击反选框时，选中的多选框变为不选中，同时不选中的多选框变为选中，如果全部多选框处于选中状态，那么全选/全不选框选中，反之则不选中；
4、点击提交框，将会显示选中的多选框信息；
5、点击全选/全不选框时，选中则全部多选框选中；不选中，则全部多选框不选中。同时，如果全部多选框处于选中状态时，全选/全不选框也将处于选中状态，反之，如果有一个多选框不是选中状态，则全选/全不选框处不选中状态。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function () { //获取四个多选框 var items = document.getElementsByName("items"); //获取全选、全不选框 var checkedAllBox = document.getElementById("checkedAllBox"); /** * 1、全选功能：点击按钮只会，四个多选框全部被选中 */ var checkedAllBtn = document.getElementById("checkedAllBtn"); checkedAllBtn.onclick = function () {//给全选绑定单击响应事件 for (var i = 0; i < items.length; i++) { items[i].checked = true;//将多选框设置为选中状态 } checkedAllBox.checked = true;//全选时，全选/全不选框要选中 } /** * 2、全不选：点击按钮，所有选中的多选框都会变成不选中状态 */ var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function () {//绑定单击响应事件 for (var i = 0; i < items.length; i++) { items[i].checked = false;//将原来选中的状态修改为不选中 } checkedAllBox.checked = false;//全不选时，全选/全不选框不能选中 } /** * 3、反选：点击按钮之后，选中的多选框会变成不选中，不选中的多选框会变成选中 */ var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function () {//绑定单击响应事件 checkedAllBox.checked = true;//点击反选时，默认全选/全不选框是选中状态 for (var i = 0; i < items.length; i++) { items[i].checked = !items[i].checked;//将原来选中的状态修改为不选中 //如果多选框中有一个不选中，那么全选/全不选框就不能选中 if (!items[i].checked) { checkedAllBox.checked = false; } } } /** * 4、提交：单击按钮之后，选中的内容将会打印出来 */ var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function () {//绑定单击响应事件 for (var i = 0; i < items.length; i++) { if (items[i].checked == true) {//判断如果该多选框是选中的状态，那么就会提交 alert(items[i].value); } } } /** * 5、全选和全不选：单击按钮之后，如果是全选状态将变成全不选；如果是全不选状态，将会变成全选； * 如果不是全选状态将会变成全选，同时如果是全选，那么全选框同时会被选中，如果是全不选，全不选框将会同时被选中 */ checkedAllBox.onclick = function () { /* 需求一： 给全选和全不选绑定单击响应函数，当点击全选和全不选的时候 多选框的选中状态应该和全选、全不选的状态一样 */ //检查多选框的状态 for (var i = 0; i < items.length; i++) { items[i].checked = this.checked;//保证多选框的状态和全选、全不选的状态是一样的 } }; /* 需求二： 1、当多选框全部选中时，全选框要显示选中状态； 2、当多选框全部不选中时，全选框要显示不是选中状态 所以要先给所有的多选框绑定单击响应事件，在多选框在点击的时候就进行判断，由此来确定全选、全不选框的状态 */ //给所有的多选框绑定单击响应事件 for (var i = 0; i < items.length; i++) { //最外层循环只是给每一个多选框绑定单击响应函数 items[i].onclick = function () { //每点击一次多选框，就循环判断一次 checkedAllBox.checked = true; for (var j = 0; j < items.length; j++) { if (!items[j].checked) { checkedAllBox.checked = false; break; } } }; } } </script> </head> <body> <form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/> <input type="button" id="checkedAllBtn" value="全 选"/> <input type="button" id="checkedNoBtn" value="全不选"/> <input type="button" id="checkedRevBtn" value="反 选"/> <input type="button" id="sendBtn" value="提 交"/> </form> </body> </html>
-
uniapp 多选框的全选功能实现
2022-04-16 19:33:09uniapp内置的checkbox其实以及checkbox-group本来挺好的，但是有两个问题： 无法依赖其事件实现全选 ...然后此时我取消了其中一个选项，此时触发change事件，但是它反馈给我的已选列表是错的。这是不行的。展开全文uniapp内置的
checkbox其实以及checkbox-group本来挺好的，但是有两个问题：- 无法依赖其事件实现全选
- 样式固定，难以修改
他们无法实现全选的原因是：
我动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件。意味着无法依赖checkbox-group管理好已选项。就是说：我点了全选，界面上看着是全选了。然后此时我取消了其中一个选项，此时触发change事件，但是它反馈给我的已选列表是错的。这是不行的。
所以我自己想了个实现全选多选框的方案。
实现思路
鉴于上面的问题，于是就可以放弃
checkbox-group了，那么，我顺便就放弃了checkbox，因为我更喜欢radio的圆圈样式。首先先模拟生成一些数据，方便展示，数据的要点是要有一个字段
selected，其余随心所欲：<script setup lang="ts"> import { reactive } from "vue"; // 模拟的数据对象，要是响应式的 let data = reactive([] as { id: number; text: string; selected: boolean }[]); // 生成数据 for (let i = 0; i < 10; i++) { data.push({ id: i + 5, text: "标题" + i, selected: false, }); } </script>然后我们需要有一个存储已选择数据信息的对象，采用map：
// 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定 let selected = reactive(new Map<number, number>());在然后我们得有一个选项框点击事件，用于选择数据或者取消选择：
// 选项框点击事件，参数是数据的下标 function checkbox(index: number) { // 选中的状态下再次点击，即为取消选中 if (data[index].selected) { data[index].selected = false; selected.delete(index); // 然后删除对应key即可 } // 未选中状态下点击 else { data[index].selected = true; selected.set(index, data[index].id); } }再再然后，我们还得有一个全选的点击事件：
// 全选与反选事件 function allSelect() { // 已经全选情况下，就是反选，全选就说明长度一样 if (selected.size === data.length) { selected.clear(); // 全部清除 data.forEach((element) => { element.selected = false; // 全部不选，就行了 }); } // 还未全选的状态下 else { data.forEach((element, index) => { // 因为可能存在部分已经选择了，所以得先判断是否已存在，不存在才需要添加 if (!selected.has(index)) { selected.set(index, element.id); // key是对应的下标index，而value是可以自定义的 element.selected = true; // 设为选中 } }); } }其实上面两个点击事件都是很基本的判断和增删数据。至此功能已经全部都有了，下面看看页面怎么写：
<template> <!-- 是个多选列表 --> <view v-for="(item, index) in data"> <label style="margin-left: 50px"> <radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }} </label> </view> <!-- 全选按钮 --> <label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label> </template>其实就两组radio，一个是循环展示数据，一个是全选按钮。
连起来的完整代码：
<template> <!-- 是个多选列表 --> <view v-for="(item, index) in data"> <label style="margin-left: 50px"> <radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }} </label> </view> <!-- 全选按钮 --> <label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label> </template> <script setup lang="ts"> import { reactive } from "vue"; // 模拟的数据对象，要是响应式的 let data = reactive([] as { id: number; text: string; selected: boolean }[]); // 生成数据 for (let i = 0; i < 10; i++) { data.push({ id: i + 5, text: "标题" + i, selected: false, }); } // 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定 let selected = reactive(new Map<number, number>()); // 全选与反选事件 function allSelect() { // 已经全选情况下，就是反选，全选就说明长度一样 if (selected.size === data.length) { selected.clear(); // 全部清除 data.forEach((element) => { element.selected = false; // 全部不选，就行了 }); } // 还未全选的状态下 else { data.forEach((element, index) => { // 因为可能存在部分已经选择了，所以得先判断是否已存在，不存在才需要添加 if (!selected.has(index)) { selected.set(index, element.id); // key是对应的下标index，而value是可以自定义的 element.selected = true; // 设为选中 } }); } } // 选项框点击事件，参数是数据的下标 function checkbox(index: number) { // 选中的状态下再次点击，即为取消选中 if (data[index].selected) { data[index].selected = false; selected.delete(index); // 然后删除对应key即可 } // 未选中状态下点击 else { data[index].selected = true; selected.set(index, data[index].id); } } </script> <style></style>看起来代码不少，其实都是很基础的逻辑判断。
最后效果是这样的：
全选：
多选：
反选全部：
-
Element el-check 多选框详解
2021-01-30 13:59:57多选框用来从备选的选项中选择任意多个，0个或者全部均可。 注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。 2. 普通多选框 普通...展开全文1. 用途
多选框用来从备选的选项中选择任意多个，0个或者全部均可。
注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。
2. 普通多选框
普通多选框v-model绑定一个变量，变量的值为true/false分别对应选中/未选中，示例如下：
HTML代码：
普通多选框： <el-checkbox v-model="checkedBasketball">篮球</el-checkbox> <el-checkbox v-model="checkedFootball">足球</el-checkbox> <el-divider></el-divider>JS代码：
checkedBasketball: true, checkedFootball: false,效果如下：
3. 带边框的多选框
带边框的多选框样式更加富有科技感，但是用法是一样的。HTML代码部分添加border属性即可：
带边框的多选框: <el-checkbox v-model="checkedBasketball" border>篮球</el-checkbox> <el-checkbox v-model="checkedFootball" border>足球</el-checkbox> <el-divider></el-divider>效果如下：
4. 多选框组
如果选项过多，每个多选框对应一个变量非常不方便，可以使用多选框组，统一绑定一个变量。变量的值即为选中项的label值的集合。
HTML代码：
多选框组，选中项{{checkList}} <el-checkbox-group v-model="checkList"> <el-checkbox label="basketball">篮球</el-checkbox> <el-checkbox label="football">足球</el-checkbox> <el-checkbox label="volleyball">排球</el-checkbox> </el-checkbox-group> <el-divider></el-divider>JS代码：
checkList: ['basketball', 'football'],效果如下：
5. 按钮样式的多选框组
可以将每个选项改为按钮样式，外观更加美观。
按钮样式多选框组 <el-checkbox-group v-model="checkList"> <el-checkbox-button label="basketball">篮球</el-checkbox-button> <el-checkbox-button label="football">足球</el-checkbox-button> <el-checkbox-button label="volleyball">排球</el-checkbox-button> </el-checkbox-group> <el-divider></el-divider>效果如下：
6. 多选框组选中数量限制
可以给多选框组设置最小、最大选中数量限制，这样可以不必通过js代码控制选中数量，更加简单。
当然实际上还是使用js控制更加灵活，我个人还是倾向于使用js代码。
HTML代码：
多选框组选中数量限制 <el-checkbox-group v-model="checkList2" :min="1" :max="2"> <el-checkbox label="basketball">篮球</el-checkbox> <el-checkbox label="football">足球</el-checkbox> <el-checkbox label="volleyball">排球</el-checkbox> </el-checkbox-group>JS代码：
checkList2: ['basketball'],效果如下：
7. 选项通过变量自动生成
在实际项目中使用时，往往多选框的选项是根据后端发过来的数据决定的，是动态的，实例如下：
HTML代码：
动态生成选项，选中项{{courseSelected}} <el-checkbox-group v-model="courseSelected"> <el-checkbox v-for="item in courseAll" :key="item.id" :label="item.id">{{item.name}}</el-checkbox> </el-checkbox-group>JS代码：
courseAll: [{ id: 1, name: "语文" }, { id: 2, name: "数学" }], courseSelected: [],效果如下：
8. 小结
建议使用多选框组，代码和逻辑更加清晰。
-
Element表格多选框
2022-03-16 18:11:32Element中表格多选框 -
vue实现多选框(复选框)
2022-04-17 20:22:35<template> <table class="t1"> <tr class="tr1"> <td> <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>... . -
jquery实现多选框
2022-04-02 15:41:35全选 全不选 选中 3 项 确定 1.选项 2.选项 3.选项 4.选项 5.选项 6.选项 7.选项 8.选项 9.选项 10.选项 11.选项 12.选项 13.选项 14.选项 15.选项 16.选项 17.选项 18.选项 19.选项 20.选项 21.选项 22.选项 23.... -
多选框之二级的多选框
2020-10-19 20:07:52最近项目中有要求做一个多选框，如果只是一个简单的一级多选框还好说，可是我这个是二级的，我百度了好久没找到，所幸的是后来这个功能取消了，但为了预防我闲暇之余将这个功能简单做了一下。 直接上代码 <!... -
Android弹出多选框设计
2022-03-21 17:12:32在activity_main.xml布局一个button控件，大小，颜色，位置，背景可自行调节，以被用来在MainActivity.java调用其id来实现点击弹出多选框！在btn1.setOnClickListener(new View.OnClickListener() { @Override ... -
css修改多选框的样式
2020-05-25 17:28:05每日的艰辛历程：最开始做好的是左边...实现的思路是用新加的label标签替换掉默认的input多选框 <input type="checkbox" class="checkone" value="专项行动管理系统" iconcolor="#ce53c1" name="sysnameselect... -
elementui 多选框的使用
2021-08-27 20:08:52elementui 多选框的使用 checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性... -
js获取多选框选中状态
2022-03-02 17:41:03} 这个是循环获取多条数数据 var json = ''; $("input[name=demo]").each(function(){ if ($(this).prop("checked")){ json = json +'"'+ $(this).parent().text() +'":'+ $(this).next("input[name=value]").... -
layui 单选框和多选框联动实现多选框的禁用
2020-04-27 20:27:01首先是单选框和多选框的html代码： <div class="layui-form-item"> <label class="layui-form-label">禁用开关</label> <div class="layui-input-block"> &l... -
Axure RP下拉多选框
2018-04-04 10:09:03使用全局环境变量、动态面板、复选框，利于选中、取消选中来赋值。 -
CheckBox多选框
2020-08-25 16:45:31CheckBox多选框 基础用法 单独使用可以表示两种状态之间的切换，写在标签中的内容为checkbox按钮的介绍 在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true，... -
checkbox多选框，radio单选框
2021-08-14 09:20:57checkbox多选框，radio单选框一、checkbox多选框1.语法2.用法实例二、radio单选框1.语法2.案例 一、checkbox多选框 1.语法 <input name="Fruit" type="checkbox" value="" /> 使用html input标签，name为... -
复选框（checkbox）、多选框
2021-04-28 17:29:19可同时选中多个选项，实现全选、全不选、反选等功能。 2、技术分析 基础的HTML、CSS、JavaScript。 3、详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明，列表包含三个部分，整体是一个多选列表，... -
jq 如何获取多选框选中的值
2021-02-28 23:03:46jquery如何获取多选框选中的值，有两种方法 1、通过id获取是否选中（单个） 1）引入jquery文件 2）Html设计如下 <div> <span>运动类：</span> <div id="div1" style="position:relative;left... -
CSS 自定义多选框样式
2020-06-08 13:47:37今天看了一个做 Todo List 的视频，学了一招，可以自定义多选框的样式，只用 CSS 就可以做到。 起步 先写一些关于表单最基础的 HTML 和 CSS。 下面的 HTML 表单允许你选择多个颜色： <form> <fieldset>... -
jquery中select多选框取值
2012-04-12 09:26:38比较适合jsp页面多选，单选按钮等 -
超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现
2020-02-18 16:34:03超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现 对多选框实现 全选、不选、反选 是一个常见的功能，尤其是在外面使用了 vue 或者 react 等前端框架之后，仅仅是需要数据处理，我相信各位... -
HTML|按钮和多选框
2021-07-21 22:10:201.多选框 和单选框相比，就是将type属性从radio改成了checkbox，比如我们建立一个爱好的多项选择： 有睡觉，篮球，足球和编程： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF... -
element ui checkbox-group多选框怎么选中id值
2021-08-30 19:45:35在项目开发中，使用多选框组，选中时想要取到该项的id而不是label值： checkbox-group：Element ui 中的组件，只需要在 Group 中使用v-model绑定Array类型的变量即可,并且绑定change实践，el-checkbox 的 label属性... -
vue多选 多选框
2019-09-26 17:27:28vue多选 多选框 -
vue-多选框设置为单选框
2022-04-08 16:24:15不要使用@selection-change,会有渲染问题。 table是封装过的。 <t-table @select-all="selectAll" @select="selection" ...selectAll() { // 当做清空来用，单选就没有全选功能 let elTb = this.$refs.... -
layui的下拉多选框实现
2022-03-24 16:52:54此次使用的xm-select插件，一款始于layui，下拉选择框的多选解决方案插件 快速上手使用： 首先下载xm-select.js文件，然后放到项目里 下载地址：https://toscode.gitee.com/maplemei/xm-select/tree/master/dist 2... -
jQuery实现多选框全选/全部选
2021-01-18 20:47:30用js jquery 的方法实现全选/全不选； 1.html代码： <label for="all" id="labelall">全选</label> <input type="checkbox" id="all"> <ul id="ul"> <li> <label for="all"&... -
vue elementui checkbox多选框功能
2021-09-09 19:27:12一、在选择框上方添加一个多选 //增加的 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="fla" >全选</el-checkbox > //以下是被... -
鼠标框选多选框、复选框
2010-11-26 09:56:04js实现拖动鼠标框选复选框,想要的来下吧
收藏数
676,773
精华内容
270,709