精华内容
下载资源
问答
  • 这是一个非常简单的插件,可让您轻松地将某些复选框组合在一起并创建一个主复选框,该主复选框可以选中或取消选中所有从属复选框。 如何使用它 给定一个具有id master的复选框和一个字段集中的某些复选框,您可以...
  • ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选


    ExtJs实现复选框Checkboxgroup单勾选及跨控件全选

         由于项目的需要,我们要将EXT的控件Checkboxgroup复选框组改造成但勾选,并且实现一个复选框组控制其他多个复选框组的全选,以下是关于如何实现的代码片段。

    1.创建CheckboxGroup对象

    1,新建空的EOS6.5的工程,新建com.towngas.tcis. gridlock构件包;

    2,在com.towngas.tcis.gridlock构件包的“展现”节点下的“页面资源”节点中创建一个文件夹,命名为gridlock;

    3,在新建的文件夹中创建gridlockUi.js文件,gridlockEv.js文件。

    4,在gridlockUi.js文件中创建对象:

    varfieldAllSelect =  newExt.form.CheckboxGroup({

                     xtype: 'checkboxgroup',

                     fieldLabel: '全选',

                     itemCls: 'x-check-group-alt',

                     // Put all controls in a single column with width 100%

                     columns : 8,

                     items: [

                          {boxLabel: '全选1', name: '0',checked: false,

                          }},

                          {boxLabel: '全选2', name:'1',checked: false,

                         }},

                          {boxLabel: '全选3', name:'2',checked: false,

                          }},

                          {boxLabel: '全选4', name:'3',checked: false,

                          }},

                          {boxLabel: '全选5', name:'4',checked: false,

                          }}

                     ]

                  });

     

     

     

    2.扩展CheckboxGroup的单选方法

           对创建的CheckboxGroup对象扩展增加方法singlecheck,参数为CheckboxGroup对象以及,复选框的选项items的索引,内容如下:

    singlecheck: function (ChkGrp, index) {

             if (ChkGrp.items.itemAt(index).checked) {

                for (var i = 0; i <ChkGrp.items.length; i++) {

                     if (i != index) {

                        if(ChkGrp.items.itemAt(i).checked) {

                             var id =ChkGrp.items.itemAt(i).id;

                             ChkGrp.setValue(id,false);

                        }

                     }

                }

              }

             }

    3.编写CheckboxGroup的items选项的监听事件

           在创建的CheckboxGroup对象fieldAllSelect中,增加对fieldAllSelect的items的“check”选中的监听事件,内容如下:      

    items: [

                          {boxLabel: '全选1', name: '0',checked: false,

                          listeners : {

                                 'check':function(){

                                      fieldAllSelect.singlecheck(fieldAllSelect,0);

                                 }

                          }},

                          {boxLabel: '全选2', name:'1',checked: false,

                          listeners : {

                                 'check':function(){

                                      fieldAllSelect.singlecheck(fieldAllSelect,1);

                                 }

                          }},

                          {boxLabel: '全选3', name:'2',checked: false,

                          listeners : {

                                 'check':function(){

                                      fieldAllSelect.singlecheck(fieldAllSelect,2);

                                 }

                          }},

                          {boxLabel: '全选4', name:'3',checked: false,

                          listeners : {

                                 'check':function(){

                                      fieldAllSelect.singlecheck(fieldAllSelect,3);

                                 }

                          }},

                          {boxLabel: '全选5', name:'4',checked: false,

                    listeners : {

                                 'check':function(){

                                      fieldAllSelect.singlecheck(fieldAllSelect,4);

                                 }

                          }}

                     ]

    此时,已经实现了CheckboxGroup复选框变成只能都选一个选项的单勾选框,满足了客户需求。

     

    4.复选框CheckboxGroup单选的实际效果

    在之前创建的内容之后,实现了复选框都勾选一个选项,如图所示:

    勾选“全选1”出现如下图所示的效果:


    勾选“全选2”之后,“全选1”出于不勾选状态,如下图所示的效果:

     

    5.另外一种单勾选实现方法

    在之前创建的内容之后,实现了复选框都勾选一个选项,下面的内容是另外一种方法实现单勾选功能,内容如下:

    ……   this. firstInputValue = null;

    fieldCfg = {

                                       xtype :'dictcheckboxgroup',

                                       dictData :SQ_CONPARAM_APPROVELEVEL,

                                       itemCls :'x-check-group-alt',

                                       columns : 8,

                                       id :this.checkGroupId,

                                       allowBlank :false,

                                       blankText :"不能全为空,请勾选一项!",

                                       clearValue :function() { // 清空所有值

                                              this.items.each(function(item){

                                                                   item.setValue(false);

                                                            });

                                       },

                                       nocheckValue: function(index) { // 不选中某值

                                              if(this.items.itemAt(index)){

                                                 this.items.itemAt(index).setValue(false);

                                              }

                                       },

                                       checkValue :function(index) { // 选中某值

                                              if(this.items.itemAt(index)){

                                                  this.items.itemAt(index).setValue(true);

                                              }

                                       },

                                       uncheckValue: function(box) { // 不选中某值

                                              this.items.each(function(item) {

                                              if(box.inputValue != item.inputValue) {

                                                            item.setValue(false);

                                                     }

                                              });

                                       },

                                       listeners : {

                                              'change': function(checkgroup, checkedBoxs) {

                                                     if(checkedBoxs.length == 1) {

                                                         this.firstInputValue = checkedBoxs[0];

                                                     }

                                                     if(checkedBoxs.length == 2) {

                                                            varsbox = null;

                                                            for(var n = 0; n < checkedBoxs.length; n++) {

                                                                   if(this.firstInputValue != checkedBoxs[n]) {

                                                                          sbox= checkedBoxs[n];

                                                                   }

                                                            }

                                                            for(var i = 0; i < checkgroup.items.length; i++) {

                                                                   if(sbox != checkgroup.items.itemAt(i)) {

                                                                          checkgroup.items.itemAt(i)

                                                                                        .setValue(false);

                                                                   }

                                                            }

                                                     }

     

                                              }

                                       }

                                }

    ……

    6.对CheckboxGroup扩展实现跨控件全选功能

    完成了以上的步骤,两个不同的CheckboxGroup单勾选功能已经实现,我们对这两个不同的控件,实现了跨控件的全选功能,就是一个CheckboxGroup控制一组CheckboxGroup的全选功能。具体实现内容如下:

    listeners : {

    'change' :function(checkgroup, checkedBoxs) {

           var cbitems = checkgroup.items;   

           for (var i = 0; i < cbitems.length; i++) {   

                  if (cbitems.itemAt(i).checked) {   

                    var index =cbitems.itemAt(i).name;

                    //获取下面对应的勾选框

                    vardictcheckboxgroups =

    schemeLoadSelf.findByType('dictcheckboxgroup');

                    for(var j=0;j< dictcheckboxgroups.length; j++){

                                var len =dictcheckboxgroups[j].items.length;

                                if(index<=len){

                                 //勾选指定索引项

                                  dictcheckboxgroups[j].checkValue(index);

                                }

                 }

               }else{

                     var index =cbitems.itemAt(i).name;

                         //获取下面对应的勾选框

                         var dictcheckboxgroups =

    schemeLoadSelf.findByType('dictcheckboxgroup');

                         for(var j=0;j < dictcheckboxgroups.length;j++){

                             varlen = dictcheckboxgroups[j].items.length;

                                if(index<=len){

                                   //取消勾选指定索引项

                                       dictcheckboxgroups[j].nocheckValue(index);

                                }

                         }

                    }

                  } 

    }

    }

    7.测试复选框跨控件控制一组复选框全选功能

    此时整个界面已开发完成,我们完成了对CheckboxGroup多选框全选一组复选框的功能,如下图所示:

    勾选“全选1”勾选框,下面一组复选框勾选各自的第一项,如图所示:

     

    勾选“全选2”勾选框,下面一组复选框勾选各自的第二项,如图所示:


    勾选“全选3”勾选框,下面一组复选框勾选各自的第三项,如图所示:

          

         通过以上的几个步骤,可以实现在EXT前台框架下对复选框的方法的扩展满足用户需求和提高用户体验。该种方式从一定程度上来说背离了EXT3.4的原生态的使用原则,从这一点上来说,需要我们在开发EXT界面时,对有些不常见的EXT界面控件特性的扩展,从而实现界面的可操作性以及友好性。

     


    展开全文
  • HTML复选框和提交按钮组合设置

    千次阅读 2015-08-05 16:39:27
    在html中怎样来创建复选框,对于创建复选框我们应该注意什么样的问题,这个html文档借助个例子,很好的总结了对复选框的设置,设置复选框用到的标签是<form><input>我们队这些标签的属性应该怎样来写
    <!-- 在这个html文档中我们要编写创建一个复选框的
    
    效果,并且含有一个按钮,当我们点击按钮后面的复选
    项目的时候,会记录这个我们 的选项并且在点击summit之后我们的结果会提交到服务器
    那么这个效果怎么来实现,我们来看一下这个程序
    -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    <title></title>
    </head>
    <body>
       <form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get" >
        I have a bike:
        <input type="checkbox" name="vehicle" value="Bike"
        checked="checked">
        <br/>
        I have a car:
        <input type="checkbox" name="vehicle" value="Car"/>
        <br/>
        I have an airplane:
        <input type="checkbox" name="vehicle" value="Airplane"/>
        <br/><br/>
        <input type="submit" value="Submit"/>
    </form>
    <p>如果你点击的是"Submit"按钮,你将把输入的传送到对应的新页面</p>
    </body>
    </html>
    <!-- 我们来看一下这个程序的介绍:我们要创建的是一个复选框,用到的form中的属性是
    name="input" action是一个属性表示的是我们将下面的结果是送到哪一个界面,然后是 
    method的值是get表示的是从网页上获取数据,然后我们来看一下怎样对复选项进行设置
    利用都的是input这个标签,并且里面的属性是type的值为checkbox,第一个选项的属性比其他的
    属性多一个checked这个属性,然后name的值都是一样的,应该因为这些复选项是一组的缘故
    这样就完成了对复选框的设定
    最后的提交-->
    展开全文
  • elementui复选框组使用与遇到的问题

    千次阅读 2019-04-19 18:47:44
    今天有个弹出窗编辑的时候elementui的复选框出了问题,控制台也没有报错,但就是死活选不中,解决后决定写遍文章描述一下复选框的用法,以及这个问题是怎么导致的。 1、复选框组使用 // deviceDialogFormData....

    今天有个弹出窗编辑的时候elementui的复选框出了问题,控制台也没有报错,但就是死活选不中,解决后决定写一遍文章描述一下复选框的用法,以及这个问题是怎么导致的。

    1、复选框组使用

    // deviceDialogFormData.config默认为['0']
    <el-checkbox-group v-model="deviceDialogFormData.config" @change="handleCheckedChange">
    	<el-checkbox :label="'0'" disabled>小明</el-checkbox>
    	<el-checkbox :label="'1'">小红</el-checkbox>
    	<el-checkbox :label="'2'">小张</el-checkbox>
    </el-checkbox-group>
    

    复选框值改变事件的方法

    // value复选框组的选中值组成的数组
    handleCheckedChange(value) {
      let checkedCount = value.length;
    }
    

    2、默认值的设置

    复选框组的选中值以数组形式返回,所以默认值也必须设置为数组。

    deviceDialogFormData.config = ['0']
    

    3、遇到的问题

    新增与编辑用的是同一个组件,但是新增的复选框组没有问题,编辑时复选框组却点了没反应。
    随后在handleCheckedChange方法中打印,点击“小红”,发现数组选中值也没有改变,但是仍然出发了事件,这就很奇怪了。
    在这里插入图片描述

    // value复选框组的选中值组成的数组
    handleCheckedChange(value) {
    	console.log(value); // 点击选中小红打印选中的值结果依然为['1'],正常情况下应该为['1','2']
      let checkedCount = value.length;
    }
    

    随后检查代码,发现是在传值时对象写法问题。因为使用的表单,所以是进行了表单数据绑定的,deviceDialogFormData对象绑定了表单,deviceDialogFormData.config则对应选中的复选框数据,但是因为在编辑时赋值写法问题,所以导致无法正常操作。

    复选框组所在的表单行的html标签代码:

                <el-form-item label="设备配置" prop="config" style="text-align: left;">
                  <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="deviceDialogFormData.config" @change="handleCheckedChange">
                    <el-checkbox :label="'0'" disabled>小明</el-checkbox>
                    <el-checkbox :label="'1'">小红</el-checkbox>
                    <el-checkbox :label="'2'">小张</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
    

    3.1、导致问题的写法

    赋值创建对象字面量对象之后再给config赋值。

    this.deviceDialogFormData = {
    	// 其它属性值的赋值略
    }
    this.deviceDialogFormData.config = data.config.split(",");
    

    3.2、正常可以使用的写法

    赋值创建对象字面量对象时时就将config写进去。

    this.deviceDialogFormData = {
    	// 其它属性值的赋值略
      config: data.config.split(",")
    }
    

    4、事件冒泡的问题

    elementui的复选框如果需要阻止事件冒泡,最好在外卖加一层div,把事件绑定到该div上。

    <div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)">
              <div class="checkbox"  v-on:click.stop="">
                <el-checkbox :label="fileName"></el-checkbox>
              </div>
              <img class="img" :src="playPath + fileName">
              <p class="name">{{fileName}}</p>
            </div>
    

    详细情况参考这篇文章
    https://blog.csdn.net/weixin_44849078/article/details/89406583

    展开全文
  • 单纯的创建一复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id","mayi"); 但是这仅仅是是创建了一个...
  • 1、要用v-for绑定多组复选框,首先v-for绑定的数据一定是个动态的。比如我用了个数组qitem[doneNum].body ,doneNum是动态变化的。 2、input类型为checkbox 的标签上的v-model绑定了option.checked ,这个属性在...

    ## Vue 中 v-for 渲染多组复选框,

    1280506-20180726145844790-1339045390.png
    1280506-20180726145855021-680341658.png
    1280506-20180726145913325-1792786897.png
    1280506-20180726145934727-732454495.png

    1、要用v-for绑定多组复选框,首先v-for绑定的数据一定是一个动态的。比如我用了一个数组qitem[doneNum].body ,doneNum是动态变化的。

    2、input类型为checkbox 的标签上的v-model绑定了option.checked ,这个属性在qitem的body中是没有的。他会创建并这个属性(这个属性是一个布尔值)绑定到这个值上。当第一次点击的,创建这个属性,并且为true,再次点击变成false

    3、然后通过 getchecked(option) ,传入数据。在函数内做判断,取出被选中的选项即可。

    ## Vue 中 v-for 渲染多组单选框,

    单选框就不存在绑定数据是布尔值的情况了,取下标就好了。

    转载于:https://www.cnblogs.com/linququ/p/9371846.html

    展开全文
  • 组框、单选按钮和复选框都是对话框的常见控件。组框与静态文本框一样是CStatic类的对象,单选按钮和复选框与命令按钮一样都是CButton类的对象。 组框 当对话框上控件较多时,可以使用组框将一组相关的控件框起来,...
  • 本文将说明如何创建一个带全选复选框的列表控件。其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成。它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中;反之,取消选中...
  • Qt: 创建具有复选框的树形控件

    万次阅读 2016-05-09 21:25:02
    1. 新建Qt GUI应用,项目名称自定,基类选择QWidget,选中“创建界面”复选框。 2. 双击“widget.ui”文件,打开Qt界面设计器,拖出份QTreeWidget控件。 2. 在头文件“widget.h”中添加上相应的头文件 ...
  • ​ 通过使用树形控件QTreeWidget创建具有联动功能的和复选框树形控件,实现勾选个(选中),其父节点也会改变相应的状态(且父亲节点会迭代修改状态),弥补参考文章的不足之处,创建工作中更加有效且实用的控件。...
  • 一个易于使用的React Component创建一复选框组,其中一个复选框用于选中所有复选框,另一个复选框则不选中任何复选框。 安装 npm install --save @createnl/grouped-checkboxes yarn add @createnl/grouped-...
  • Checkboxes(复选框

    千次阅读 2014-04-18 13:35:21
    因为用户可以从一组复选框选项里选择多个项目,且每个复选框都是分开管理的,所以你必须为每个复选框注册点击监听器。 响应点击事件 用户选择复选框时,CheckBox 对象会收到on-click事件。 在X
  • struts中创建动态复选框标签的使用

    千次阅读 2007-06-11 09:17:00
    在用户界面设计中,复选框组不如它的同类 —— 多行选择框那样流行。它们基本上做的是同一件事,即选择映射到单一 name 属性的一组选项。当在组中使用时,复选框执行的功能实际与多行选择框一样,但是它们占据的屏幕...
  • 单元格下拉框实现复选框多选 将复选框链接到带有宏的单元格 (Link Check Boxes to Cells With a Macro) You can use check boxes on a worksheet, and link the results to a cell. If the box is checked, the cell...
  • angularjs input checkbox复选框组的实现

    千次阅读 2019-09-03 19:17:47
    如果实现方式是创建功能,请参考:https://mp.csdn.net/postedit/100515989 第二种实现方式(如修改功能),代码如下: // html页面代码 <body ng-app="app"> <div> <input type="checkbox" ...
  • 目录 1 CheckBox获取选中项文本  2 CheckedListBox获取选中项文本 ...(1)①创建一个winForm窗体应用,在设计窗体中拖入一个“Panel”面板容器,一个button,一个textBox(并将其Multiline属性...
  • Java Swing JCheckBox:复选框组件

    千次阅读 2019-03-05 23:07:28
    JCheckBox(复选框组件) ...JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也未指定图像,并且未被选择。 JCheckBox(String text):创建一个指定文本的复选框。 JCheckBox(String text,boo...
  • 一组Flutter小部件,使对复选框和单选按钮进行分组变得更加容易! 正在安装 将以下内容添加到您的pubspec.yaml文件中: dependencies: grouped_buttons: ^1.0.4 简单用法 创建一个基本的CheckboxGroup Checkbox...
  • 复选框、单行文本框、组合框

    千次阅读 2017-06-28 11:33:41
    一、复选框 复选框的操作函数 bool isChecked() const //判断这个复选框是否被选中 void setChecked(bool) //设置这个复选框的...例1创建一个是否同意协议的复选框选中后下一步按钮能用不选中下一步按钮不能用 #ifnd
  • 2.2 复选框和单选按钮的使用实例

    千次阅读 2017-06-22 22:26:29
    复选框和单选按钮都用于在界面上显示一些选项供用户选择,界面上的复选框可以随意选择或取消选择,而处于同一的单选按钮,同时只能有个处于选中状态,当个单选按钮变成选择状态时,其同中之前选中的控件将...
  • zTree复选框案例

    千次阅读 2018-08-14 10:52:31
    .配置树参数 //1.获取setting值 function getSetting(){ var setting = { view: { dblClickExpand: true, selectedMulti : true,//可以多选 showLine: true }, check: { enable: ...
  • 【Android开发】基本组件-复选框

    千次阅读 2015-03-31 11:46:15
    与单选按钮不同的是,复选框可以进行多选设置,每复选框都提供"选中"和"不选中"两种状态。 在Android中,复选框使用CheckBox表示,CheckBox又是Button的子类,所以单选按钮可以直接使用Button支持的各种属性。 ...
  • 复选框组件(JCheckBox)单选框组件(JRadioButton)介绍两个个组件:复选框组件(JCheckBox):可以多选的选择框单选框组件(JRadioButton):只能单选的选择框注意事项:同一单选按钮必须先创建ButtonGroup,...
  • Android中的 单选按钮和复选框

    万次阅读 2016-11-05 16:44:01
    在Adnroid中,单选按钮和复选框都继承了普通按钮。因此它们都可以使用普通按钮支持的各种属性和方法。不同的是,它们提供了可以选中的功能,下面是对单选按钮的和复选框的进行详细的介绍。 在Android中 可以...
  • 49.java编程思想——创建窗口和程序片 文本 复选框 单选框 下拉列表 “文本字段”是允许用户输入和编辑文字的种线性区域。文本字段从文本组件那里继承了让我们选择文字、让我们像得到字符串一样得到选择的文字,...
  • 在java编程语言中,单选框按钮没有单独的类,而是作为复选框的特例存在,用户通过把一组复选框放置在同一个复选框中创建一套单选框按钮。它的构造和其它方法如下: public Checkbox()  创建一个没有标签的复选...
  • (1)创建页面,创建一个表格在表格的第一列中放入一组复选框,并实现复选框的全选、反选、提交操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
  • 单选框与复选框

    千次阅读 2010-06-08 21:54:00
    复选框与单选按钮相象,不同之处是复选框代表多重选择,用户可以选择个或多个选项。对话框编辑器中各组控件的对齐按下Ctrl键并单击要对齐的各个控件,同时选中。最后选中的控件是对齐的基准,仔细观察,它周围的8...
  • 用户界面:单选按钮和复选框的使用 步骤: 、继承JFrame 二、定义面板,组件 三、构造函数中 创建组件 设置布局 添加组件到面板,添加面板到窗体 设置窗体属性 package com.layout.test; import javax.swing.*;...
  • QTreeview的复选框使用

    千次阅读 2018-07-26 17:35:31
    目录: Qt树形控件QTreeView使用1——节点的操作 ...Qt树形控件QTreeView使用2——复选框的设置 利用C++11的function和bind功能,实现QStandardItemModel的通用遍历函数    通过QStandardItem和QStanda...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,416
精华内容 21,766
关键字:

创建一组复选框