`

复选框选中,与未选中时,值得变化

 
阅读更多
var checkCount = 0;
function tobox(obj){
var boxid = document.getElementById("id");
//var boxes = document.getElementsByName("box");
if(obj.checked == true){
checkCount++;
if(obj.value !=null||obj.value==""){
if(checkCount == 1){
boxid.value = obj.value;
}else{
boxid.value += "|"+obj.value;
}
    }else {
    boxid.value = "";
    }
}

   
    if(obj.checked == false){
    checkCount--;
    var boxid_value = boxid.value;
    if(checkCount < 1){
    boxid.value = "";
    return;
    }
    var box = boxid_value.split("|");
    boxid.value = "";
    for(var i = 0; i < box.length; i++){
      if(box[i] == null|| box[i] == ""){
      continue;
      }
    if(obj.value != box[i]){
    if(i == 0){
    boxid.value = box[i];
    }else{
    boxid.value += "|"+box[i]
    }
    }
    }
    if(boxid.value.substring(0,1) == "|"){
    boxid.value = boxid.value.substring(1);
    }
    }   
}


用一个文本框来接受复选框中的值,在选中复选框,文本框中的值会相应的增加,并且用“|”分隔;在勾去选中的复选框时,文本框中的值会相应的减少。
分享到:
评论

相关推荐

    js 实现选一个复选框 可以实现其他很多复选框同时选中

    - 当用户点击全选复选框时,所有其他的复选框都会被设置成相同的状态(选中或未选中),并且根据这些复选框的状态动态显示或隐藏相关的文本框。 #### 总结 通过以上分析,我们可以看出这段代码有效地实现了用一个...

    MFC CListBox及CTreeCtrl具有复选框功能

    ### CListBox与复选框功能 **CListBox** 是一个常见的控件,通常用于展示一系列可选择的项目。在标准的CListBox中,通常只支持单选或多选,但不直接支持复选框。要为CListBox添加复选框,我们需要自定义控件,这...

    超炫的复选框效果源码

    2. **状态过渡**:利用CSS3的过渡(transition)和动画(animation)属性,让复选框在选中或取消选中时有平滑的视觉变化,提升用户体验。 3. **交互反馈**:添加点击效果,如颜色变化、微小的缩放或者高亮显示,让...

    11种炫酷CSS3复选框checkbox样式美化效果

    5. 动态边框:通过border-radius和动画效果,实现复选框选中时边框的变化,提升用户交互体验。 实现这些效果,通常需要结合HTML结构、CSS3样式和可能的JavaScript代码。例如,index.html和readme.html可能是示例...

    CheckBox复选框美化

    总的来说,复选框的美化是一个结合了艺术与技术的过程,它涉及到UI设计原则、前端/后端编程以及用户体验的考量。通过这个资源,开发者可以快速提升应用界面的美观度,同时也能学习到如何在实践中优化用户界面的技巧...

    javascript实现复选框选中属性

    反之,当复选框未被选中时,它返回`false`。在实际操作中,开发者通常会通过元素的ID来选取DOM中的复选框元素,然后检查其`checked`属性值。在文章给出的示例中,如果复选框被选中,将执行`console.log('ItsChecked'...

    纯CSS3实现创意复选框开关按钮切换特效源码.zip

    同时,借助伪类选择器,可以为复选框添加状态变化时的视觉提示,如选中、悬停等效果,从而提高界面的响应性和互动性。 在实际应用中,设计师往往会将复选框和开关按钮嵌入到网页表单中,与JavaScript配合使用,实现...

    jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

    在设置复选框的选中状态时,可以使用`.attr()`方法,并传入"checked"作为参数,或者简写为`.prop('checked', true)`。 单选框(input元素,type="radio")是让用户在一组选项中选择一个项目的元素。jQuery提供了`:...

    swift实现的复选框控制

    在VKCheckbox中,我们可以设置一个闭包来监听复选框的状态变化,这样当用户交互时,我们就可以立即响应并执行相应的逻辑,如更新数据模型或者触发其他视图的更新。 实现一个自定义复选框通常涉及以下步骤: 1. **...

    共享一个Swing JTable组件的CheckBox管理类

    渲染器将根据模型中的数据来绘制选中或未选中的复选框图标。 为了保持数据模型与界面显示的一致性,`TableCheckboxManager`需要实现事件监听。这通常通过实现`javax.swing.event.TableModelListener`接口并注册到`...

    Extjs改变树节点的勾选状态点击按钮将复选框去掉

    接着,调用`node.getUI().toggleCheck(false)`,这个方法会对页面上的复选框进行操作,将其视觉上的勾选状态去除,也就是用户在界面上看到的复选框中的勾被清除了。 而在Extjs 4.x版本,上述方法会略有不同,主要...

    1号店Checkbox复选框美化特效代码

    3. **状态切换**:不仅仅是视觉上的变化,该特效还可能改变复选框的选中状态,比如添加选中标记或改变文字颜色,以清晰地告诉用户当前的状态。 4. **兼容性处理**:考虑到不同的浏览器可能对CSS和JavaScript的支持...

    BEMCheckBox:适用于iOS的Tasteful Checkbox。 (复选框)

    - `selectedTintColor` 属性:设置复选框选中时的边框颜色。 - `animationDuration` 属性:设置选中/取消选中动画的持续时间。 - `delegate`:遵循 `BEMCheckBoxDelegate` 协议,可以监听复选框状态变化的回调。 ...

    Windows高级控件单选、复选、图片控件.zip_c#form单选复选

    与RadioButton不同,复选框可以同时选择多个。我们可以通过CheckedChanged事件处理程序来处理用户的选中状态改变,并根据需要执行相应的代码。 3. **图片控件(PictureBox)**: PictureBox控件用于在窗体上显示...

    js获取checkbox值的方法

    因此,在实现获取复选框值的功能时,我们通常需要绑定一些事件(例如点击事件),以便在复选框的状态发生变化时,可以立即获取到最新的值。 总结来说,JavaScript为开发者提供了丰富的接口和方法来操作DOM元素,...

    智能家居系统 选择事件OnCheckedChange.doc

    1. **触发条件**:当用户在界面上改变某个单选按钮(RadioButton)或复选框(CheckBox)的状态时,即从选中变为未选中或从未选中变为选中,会触发此事件。 2. **应用场景**: - 在智能家居系统中,用户可能需要通过...

    Javascript实现CheckBox的全选与取消全选的代码

    值得注意的是,在实际使用中,我们可能还需要处理全选复选框本身的选中状态变化,这通常会通过判断复选框的checked属性来进行。如果全选复选框被选中,那么其他所有复选框也应该被选中;如果全选复选框未被选中,则...

    CheckTreeview

    3. **事件处理**:当用户更改复选框状态时,控件应触发相应的事件,以便程序可以响应这些变化。 4. **性能优化**:由于树视图可能包含大量节点,因此,设计时应考虑性能优化,避免因大量节点的更新而导致的界面卡顿...

    jQuery单选按钮和复选按钮美化效果

    在这个案例中,jQuery被用来动态改变单选按钮和复选按钮的样式,使其在用户操作时呈现出平滑的过渡效果。 复选按钮和单选按钮是网页表单中常见的元素,用于收集用户的选择信息。原生的HTML样式通常较为朴素,不够...

    3分钟写出来的Jquery版checkbox全选反选功能

    在本文中,我们将深入探讨如何使用jQuery实现复选框(checkbox)的全选与反选功能。这个功能在很多Web应用程序中都非常常见,比如在表格筛选、多选项选择等场景。通过简短的代码,我们可以轻松地为网页上的复选框组...

Global site tag (gtag.js) - Google Analytics