`

复选框移动脚本

阅读更多

页面显示

<td rowspan="4" class="TdLeft">输出(显示):</td>
    <td rowspan="4" class="TdRight"><select multiple  name="list1" style="width:150px" size="5" >
     <option value="1">工资单</option>
     <option value="2">薪酬数据</option>
     <option value="3">计算表</option>
     <option value="4">发放表</option>
    </select></td>
    <td rowspan="4"><div align="center">
      <input type="button" value=" >> "
     onclick="move(this.form.list1,this.form.list2)" name="B1">
      <br>
      <br>
      <input type="button" value=" << "
     onclick="move(this.form.list2,this.form.list1)" name="B2">
    </div></td>

 

脚本:

sortitems = 1;

function move(fbox,tbox) {
 for(var i=0; i<fbox.options.length; i++) {
  if(fbox.options[i].selected && fbox.options[i].value != "") {
   var no = new Option();
   no.value = fbox.options[i].value;
   no.text = fbox.options[i].text;
   tbox.options[tbox.options.length] = no;
   fbox.options[i].value = "";
   fbox.options[i].text = "";
   }
 }
 BumpUp(fbox);
 if (sortitems) SortD(tbox);
}
function BumpUp(box) {
 for(var i=0; i<box.options.length; i++) {
  if(box.options[i].value == "") {
   for(var j=i; j<box.options.length-1; j++) {
   box.options[j].value = box.options[j+1].value;
   box.options[j].text = box.options[j+1].text;
   }
   var ln = i;
   break;
   }
 }
 if(ln < box.options.length) {
 box.options.length -= 1;
 BumpUp(box);
  }
}
function SortD(box) {
 var temp_opts = new Array();
 var temp = new Object();
 for(var i=0; i<box.options.length; i++) {
  temp_opts[i] = box.options[i];
 }
 for(var x=0; x<temp_opts.length-1; x++) {
  for(var y=(x+1); y<temp_opts.length; y++) {
   if(temp_opts[x].text > temp_opts[y].text) {
    temp = temp_opts[x].text;
    temp_opts[x].text = temp_opts[y].text;
    temp_opts[y].text = temp;
    temp = temp_opts[x].value;
    temp_opts[x].value = temp_opts[y].value;
    temp_opts[y].value = temp;
    }
   }
 }
 for(var i=0; i<box.options.length; i++) {
  box.options[i].value = temp_opts[i].value;
  box.options[i].text = temp_opts[i].text;
  }
}

分享到:
评论

相关推荐

    jQuery单选框和复选框美化代码

    5. **响应式设计**:在移动设备上,美化后的单选框和复选框同样重要。jQuery可以配合媒体查询(Media Queries)来确保在不同设备上都能保持良好的用户体验。 在“jQuery单选框跟复选框美化代码”这个压缩包中,很...

    9款表单复选框(Checkbox)与单选按钮美化

    在网页设计中,表单元素如复选框(Checkbox)和单选按钮(Radio Button)是用户交互的重要组成部分。它们通常用于收集用户的选择性信息,例如用户同意服务条款、选择偏好或进行多选项决策。然而,原生的HTML表单元素...

    LWUIT自定义CheckBox复选框样式

    LWUIT 提供了各种组件,如按钮、文本框和复选框等,而"自定义CheckBox复选框样式"这个主题则涉及到了如何个性化LWUIT中的复选框控件,以满足开发者对于用户界面的特殊需求。 首先,我们需要理解LWUIT中复选框...

    jQuery滑动复选框操作菜单.zip

    本项目“jQuery滑动复选框操作菜单”是针对前端开发的一个功能实现,主要用于创建动态且交互性强的菜单导航,特别是在移动设备上,滑动复选框能提供更好的用户体验。下面我们将深入探讨这个主题中的关键知识点。 ...

    dtreebox脚本树型复选框

    `dtreebox` 是一种用于创建树形结构的复选框的JavaScript脚本,它提供了一种用户友好的方式来处理层次化的数据选择。在网页交互设计中,这样的组件经常被用于表示具有嵌套关系的数据,例如目录结构、组织架构或者...

    Checkbox复选框选中动画特效.zip

    4. **绝对定位(position: absolute)**:为了实现动画效果,可能需要将复选框的标记元素绝对定位在复选框上,这样在动画执行时,它们可以相对独立地移动或变换。 5. **CSS变量(CSS Custom Properties)**:如果...

    JQuery表单美化定制单选按钮与复选框美化特效

    在网页设计中,用户体验往往受到界面美观度的影响,其中表单元素如单选按钮和复选框的样式是提升整体视觉效果的关键部分。`JQuery`作为一款强大的JavaScript库,为开发者提供了丰富的功能来实现这样的美化定制。本...

    BootstrapSwitch将复选框和单选按钮变成切换开关

    BootstrapSwitch是一款基于Bootstrap框架的插件,它能够将HTML中的复选框(checkbox)和单选按钮(radio button)转化为视觉效果更佳、交互性更强的切换开关(toggle switch)。这个转换过程使得用户界面更加直观,...

    Javascript 弹出式复选框 (JQuery 插件 mulitselector).zip

    在给定的资源"Javascript 弹出式复选框 (JQuery 插件 mulitselector).zip"中,我们可以推测这是一个利用jQuery开发的插件,专门用于实现弹出式的多选功能。 首先,让我们来深入了解一下jQuery和它的核心概念。...

    ui-choose.js表单单选框复选框美化jQuery特效.zip

    `ui-choose.js`是一个专门针对表单元素,如单选框(radio)和复选框(checkbox)进行美化的jQuery插件。它使得原本单调的HTML表单元素变得更加吸引人,同时也提升了用户的交互体验。下面我们将深入探讨这个插件的...

    jQuery点击弹出下拉复选框特效代码

    本文将深入探讨“jQuery点击弹出下拉复选框特效代码”这一主题,这是一种常见的用户界面交互设计,能够提升用户体验,使得用户在有限的空间内更方便地进行多选项选择。 首先,jQuery的点击事件(click event)是...

    复选下拉框

    总结来说,"下拉复选框"是网页设计中的一个重要组件,通过使用像Bootstrap Select这样的库,可以轻松实现功能丰富且用户体验良好的复选下拉框。正确理解和应用这些工具,能大大提高网站或应用的交互性和可用性。

    JQ 全选和反选和取消

    使用jQuery,我们可以监听一个主复选框的`change`事件,当该复选框被选中时,将所有子复选框设置为选中状态。这可以通过`$('input[type="checkbox"]').prop('checked', true)`来实现,该代码会选取页面上所有的复选...

    完整版模块_CHECKBOX.rar

    6. **响应式设计**: 复选框应适应不同设备和屏幕尺寸,确保在移动设备上也能正常使用。 7. **模块化编程**: 使用模块系统(如CommonJS、ES6模块或Webpack)将复选框功能封装为可重用的组件,便于在整个项目中导入和...

    自定义单选按钮、复选框样式

    首先,我们需要理解单选按钮和复选框的基本结构。在HTML中,它们通常以`&lt;input type="radio"&gt;`和`&lt;input type="checkbox"&gt;`的形式出现,可以通过`&lt;label&gt;`标签与文本关联,提高可点击区域并提供更好的可用性。 **...

    day03-js.zip

    JavaScript可以监听主复选框的`change`事件,根据其选中状态更新所有子复选框的`checked`属性,实现全选或全不选的效果。 4. **省市联动效果**: 这是一个常见的前端表单设计,通常用在地址选择中。当用户选择一个...

    移动BOSS系统,老升新清控件工具

    在IT领域,控件是指在用户界面中用于交互的元素,如按钮、文本框、复选框等。在移动BOSS系统这样的大型应用中,随着时间推移和技术进步,可能会有新的控件替代旧有的,以提供更好的性能或功能。然而,系统升级过程中...

    个性选择框 个性选择框

    在IT行业中,"个性选择框"通常指的是在用户界面(UI)设计中具有特定样式或功能的复选框或单选按钮。这些组件是交互式应用程序的重要组成部分,允许用户进行多选或单选操作,根据自己的偏好进行选择。在本篇文章中,...

    CheckBox美化 jq插件 滑动开关

    首先,让我们理解复选框(CheckBox)的基本概念。复选框是HTML中的一个表单元素,允许用户从多个选项中进行多选。但在默认状态下,复选框的视觉效果相对简单,可能不满足现代网页设计的需求。因此,为了提升UI的吸引...

    Checkbox双向选择器jQuery代码

    本文将深入探讨“Checkbox双向选择器jQuery代码”这一主题,它主要用于实现一个用户友好的交互功能,允许用户通过点击左右箭头轻松地在两个区域之间移动已选中的复选框选项。 首先,我们需要理解复选框(Checkbox)...

Global site tag (gtag.js) - Google Analytics