精华内容
下载资源
问答
  • 该插件是一个树状复选框组件,解决需要划分多级功能的需求,如权限分配、商品划分等功能。
  • jquery 复选框组件

    2011-10-11 15:27:52
    jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件
  • vue复选框组件 Vue材料复选框 (Vue material checkbox) Material design checkbox component for Vue. Vue的材料设计复选框组件。 View demo 查看演示 Download Source 下载源 用 (Use) 与npm (With npm) ...

    vue复选框组件

    Vue材料复选框 (Vue material checkbox)

    Material design checkbox component for Vue.

    Vue的材料设计复选框组件。

    (Use)

    与npm (With npm)

    • install plugin

      安装插件

    npm install vue-material-checkbox --save
    • import to the app and add to the Vue

      导入到应用程序并添加到Vue

    import checkbox from 'vue-material-checkbox'
    Vue.use(checkbox)
    • Use it as component:

      用作组件:

    <checkbox id="mycheck1" v-model="someVar">My Checkbox</checkbox>

    零件 (Component)

    There is autogenerated id for label and checkbox, but you can specify it yourself.

    标签和复选框有自动生成的ID,但您可以自己指定。

    You can specify label for checkbox inside checkbox tag:

    您可以在复选框标签内为复选框指定标签:

    <checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </checkbox>

    You can set custom color for background of checkbox:

    您可以为复选框的背景设置自定义颜色:

    <checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </checkbox>

    道具完整表 (Complete props table)

    PropTypeDefaultWhat For
    idStringundefinedRecommended. input id associated with label
    valueStringundefinedValue for input, without it checkbox works as true/false
    colorStringundefinedPass the color string to change bg-color of checkbox
    checkedBooleanfalseis checked by default?
    nameStringundefinedName for input
    requiredBooleanfalseHTML required attr
    disabledBooleanfalseHTML disabled attr
    Struts 类型 默认 做什么的
    id String undefined 推荐 。 与标签关联的输入ID
    value String undefined 输入值(不带输入)复选框为true/false
    color String undefined 传递颜色字符串以更改复选框的bg-color
    checked Boolean false 默认情况下被选中?
    name String undefined 输入名称
    required Boolean false HTML必需的属性
    disabled Boolean false 禁用HTML的attr

    去做 (todo)

    • ripple effect

      连锁React

    翻译自: https://vuejsexamples.com/lightweight-material-design-checkbox-component-for-vue/

    vue复选框组件

    展开全文
  • CheckBoxTreeView for Delphi7 树状视图复选框组件。 该组件是一个树状视图组件。 每一个树图节点有核查框(复选框)。 该组件适合开发用户分组程序。 该组件是自编组件。编制单位:重庆千科文化传播有限责任公司。
  • 复选框组件

    2018-06-09 17:28:17
    CheckBox,复选框。JCheckBox 常用构造方法:// 无文本,默认未选中 JCheckBox() // 有文本,默认未选中 JCheckBox(String text) // 有文本,并指定是否选中 JCheckBox(String text, boolean selected) JCheckBox ...
    CheckBox,复选框。
    

    JCheckBox 常用构造方法:

    // 无文本,默认未选中
    JCheckBox()
    
    // 有文本,默认未选中
    JCheckBox(String text)
    
    // 有文本,并指定是否选中
    JCheckBox(String text, boolean selected)
    

    JCheckBox 常用方法:

    // 设置复选框的 文本、字体 和 字体颜色
    void setText(String text)
    void setFont(Font font)
    void setForeground(Color fg)
    
    /* 以下方法定义在 javax.swing.AbstractButton 基类中 */
    
    // 设置复选框是否选中状态
    void setSelected(boolean b)
    
    // 判断复选框是否选中
    boolean isSelected()
    
    // 设置复选框是否可用
    void setEnabled(boolean enable)
    
    // 设置图片和文本的间距
    void setIconTextGap(int iconTextGap)
    

    JCheckBox 常用监听器:

    // 添加状态改变监听器
    void addChangeListener(ChangeListener l)

    2. 代码实例

    package com.xiets.swing;
    
    import javax.swing.*;
    import javax.swing.event.ChangeEvent;
    import javax.swing.event.ChangeListener;
    
    public class Main {
    
        public static void main(String[] args) {
            JFrame jf = new JFrame("测试窗口");
            jf.setSize(250, 250);
            jf.setLocationRelativeTo(null);
            jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    
            JPanel panel = new JPanel();
    
            // 创建复选框
            JCheckBox checkBox01 = new JCheckBox("菠萝");
            JCheckBox checkBox02 = new JCheckBox("香蕉");
            JCheckBox checkBox03 = new JCheckBox("雪梨");
            JCheckBox checkBox04 = new JCheckBox("荔枝");
            JCheckBox checkBox05 = new JCheckBox("橘子");
            JCheckBox checkBox06 = new JCheckBox("苹果");
    
            // 添加第一个复选框的状态被改变的监听(其他复选框如果需要监听状态改变,则可按此方法添加监听)
            checkBox01.addChangeListener(new ChangeListener() {
                @Override
                public void stateChanged(ChangeEvent e) {
                    // 获取事件源(即复选框本身)
                    JCheckBox checkBox = (JCheckBox) e.getSource();
                    System.out.println(checkBox.getText() + " 是否选中: " + checkBox.isSelected());
                }
            });
    
            // 设置默认第一个复选框选中
            checkBox01.setSelected(true);
    
            panel.add(checkBox01);
            panel.add(checkBox02);
            panel.add(checkBox03);
            panel.add(checkBox04);
            panel.add(checkBox05);
            panel.add(checkBox06);
    
            jf.setContentPane(panel);
            jf.setVisible(true);
        }
    
    }
    

    结果展示:

    result.gif


    展开全文
  • vue封装复选框组件

    千次阅读 2019-05-16 23:55:20
    前言 ...checkbox复选框组件,使checkbox有三种状态: checked:ture (选中) / false (未选中) , indeterminate (部分选中) 1.利用slot插槽 2.在同一文件中用到父子通信 $emit $on 本文章的 gith...

    前言

    根据百度前端技术学院2018 MVVM 学院 中的 2.5 表单实现Input、Checkbox组件 用 vue 实现的

    checkbox复选框组件,使checkbox有三种状态: checked:ture (选中) / false (未选中) , indeterminate (部分选中)

    1.利用slot插槽

    2.在同一文件中用到父子通信 $emit $on

    本文章的 github地址


    实现思路

    1.在mounted(附加到页面上)时绑定监听

    因为只有在mounted(元素挂载到页面上)之后才能理清节点之间的关系,也才能找到目标节点的$parent,$children

    mounted() {
        // 得先检测其 $parent 是不是复选框组件(如果是,则其有onDispatch 函数)
        if (this.$parent.onDispatch) {
            // 如果组件的状态改变,则会执行其父组件的 onDispatch 函数
            this.$on("checkStatus", this.$parent.onDispatch);
        }
    },

     

    2. 当复选框状态改变时,将自己的改变后的复选框状态通知给其父复选框

    this.$emit("checkStatus", "indeterminate"/true/false);

     

    3. onDispatch 函数分析

    3.1 接收到的值为 子组件状态改变后 发送过来的状态:{"indeterminate"/true/false}

    3.2 改变其#(id).checked属性,直接操作其绑定的isChecked即可:checked="isChecked"

    isChecked只有true/false 

    3.3 改变其#(id).indeterminate属性,得获取元素(需要id,所以每个chekbox需要绑定一个id:id="id"),得到其indeterminate,

    _getIndeterminate() {
        return document.getElementById(this.id).indeterminate;
    },
    _setIndeterminate(bool) {
        document.getElementById(this.id).indeterminate = bool;
    },

     

    3.4 当复选框状态为选中/未选中 时,设置其全部子组件为相对应值

    (递归,多层改变,能对孩子,孙子,重孙等起作用。)

    _setAllSubItem(component, bool) {
        component.$children.map(i => {
            i.isChecked = bool;
            this._setAllSubItem(i, bool);
        });
    },

     

    4. 最后执行形式

    <v-checkbox text="爱好" id="hobby">
        <v-checkbox text="种花" id="plant">
            <v-checkbox text="养鱼" id="fish"></v-checkbox>
        </v-checkbox>
        <v-checkbox text="购物" id="shop"></v-checkbox>
        <v-checkbox text="吃饭" id="eat"></v-checkbox>
    </v-checkbox>

     

    代码实现

    <template>
      <div>
        <label>
          <input type="checkbox" @change="handleChange" :checked="isChecked" :id="id">
          <span class="checkbox"></span>
          <span class="text" s-if="text">{{text}}</span>
        </label>
        <div class="sub">
          <slot></slot>
        </div>
      </div>
    </template>
    <script>
    export default {
      props: ["text", "id"],
      mounted() {
        if (this.$parent.onDispatch) {
          this.$on("checkStatus", this.$parent.onDispatch);
        }
      },
      data() {
        return {
          id: this.id,
          parent: null,
          subItems: [],
          isChecked: false
        };
      },
      methods: {
        // 设置元素 Indeterminate 状态,若为true,表示部分选中
        _setIndeterminate(bool) {
          document.getElementById(this.id).indeterminate = bool;
        },
    
        // 获取元素 Indeterminate 状态
        _getIndeterminate() {
          return document.getElementById(this.id).indeterminate;
        },
    
        // 将元素所有子元素的选中状态统一设置成该元素的选中状态 true/false
        _setAllSubItem(component, bool) {
          component.$children.map(i => {
            i.isChecked = bool;
            this._setAllSubItem(i, bool);
          });
        },
    
        onDispatch(val) {
          //不是根元素
          // console.log(this.$parent.$parent._uid);
          console.log(this);
          // 恢复默认状态
          this._setIndeterminate(false);
          // 如果子组件传过来的值是"indeterminate",即子组件是部分选中状态,那么其父组件一定也是部分选中状态
          if (val == "indeterminate") {
            this._setIndeterminate(true);
            this.$emit("checkStatus", "indeterminate");
            return;
          }
          var subItems = this.$children;
          if (subItems.length > 0) {
            var check_num = 0;
            subItems.map(i => {
              // 或者如果子选项中有一个为indeterminate,那么其父组件也一定也是部分选中状态
              if (i._getIndeterminate()) {
                this._setIndeterminate(true);
                this.$emit("checkStatus", "indeterminate");
                return;
              }
              if (i.isChecked) {
                check_num++;
              }
            });
            if (check_num == subItems.length) {
              //选中子项目个数
              this.isChecked = true;
              this.$emit("checkStatus", true);
            } else if (check_num == 0) {
              this.isChecked = false;
              this.$emit("checkStatus", false);
            } else {
              this._setIndeterminate(true);
              this.$emit("checkStatus", "indeterminate");
            }
          }
        },
    
        handleChange() {
          this.isChecked = !this.isChecked;
          this.$emit("checkStatus", this.isChecked);
          if (this.isChecked) {
            this._setAllSubItem(this, true);
          } else {
            this._setAllSubItem(this, false);
          }
        }
      }
    };

     

    结束

    如果文章对你有帮助,麻烦点赞哦!一起走码农花路~

     

    展开全文
  • 基于引导框架的复选框组件 作者 文献资料 您可以找到演示和文档。 用法 切记在HTML标头中同时包含.js和.css。 使用.checkbox类创建您的<input type="checkbox"> 。 <input type="checkbox" class=...
  • 复选框的本机组件 Android示例 iOS示例 Windows示例 支持 RN版本 复选框版本 > 0.60&<0> = 0.3(从0.4开始支持IOS) <0> = 0.62以在Windows上运行 0.5 入门 yarn add @react-native-community/checkbox 要么 npm...
  • vue复选框组件 漂亮的复选框 (pretty-checkbox-vue) Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js. 快速将漂亮的复选框组件(复选框,开关,单选按钮)与Vue.js集成...

    vue复选框组件

    漂亮的复选框 (pretty-checkbox-vue)

    Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js.

    快速将漂亮的复选框组件(复选框,开关,单选按钮)与Vue.js集成在一起。

    pretty-checkbox-vuex

    安装 (Installation)

    npm i --save-dev pretty-checkbox-vue

    浏览器 (Browser)

    Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:

    包括脚本文件,然后使用Vue.use(PrettyCheckbox);安装组件Vue.use(PrettyCheckbox); 例如:

    <script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
    <script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
    <script type="text/javascript">
      Vue.use(PrettyCheckbox);
    </script>

    模组 (Module)

    import PrettyCheckbox from 'pretty-checkbox-vue';
    
    Vue.use(PrettyCheckbox);

    Or

    要么

    import PrettyInput from 'pretty-checkbox-vue/input';
    import PrettyCheck from 'pretty-checkbox-vue/check';
    import PrettyRadio from 'pretty-checkbox-vue/radio';
    
    Vue.component('p-input', PrettyInput);
    Vue.component('p-check', PrettyCheck);
    Vue.component('p-radio', PrettyRadio);

    用法 (Usage)

    Once installed, it can be used in a template as simply as:

    安装后,可以在模板中简单地使用它,如下所示:

    <p-check name="check" color="success" v-model="check">check</p-check>
    <p-radio name="radio" color="info" v-model="radio">radio</p-radio>
    
    <!-- Or it can be used just like input -->
    
    <p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
    <p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>

    物产 (Properties)

    PropertyTypeDefault Value
    typeStringcheckbox (checkbox & input) or radio (radio)
    nameString
    valueAny
    classStringp-default (checkbox & input) or p-default p-round (radio)
    true-valueBoolean or Stringtrue
    false-valueBoolean or Stringfalse
    checkedBooleanfalse
    disabledBooleanfalse
    requiredBooleanfalse
    indeterminateBooleanfalse
    colorString
    off-colorString
    hover-colorString
    indeterminate-colorString
    toggleBooleanfalse
    hoverBooleanfalse
    focusBooleanfalse
    属性 类型 默认值
    类型 复选框(复选框和输入)或单选(广播)
    名称
    任何
    p-default (复选框和输入)或p-default p-round (无线电)
    真值 布尔值或字符串 真正
    虚假价值 布尔值或字符串
    已检查 布尔型
    残障人士 布尔型
    需要 布尔型
    不定 布尔型
    颜色
    变色的
    悬停颜色
    不确定的颜色
    拨动 布尔型
    徘徊 布尔型
    焦点 布尔型

    插槽 (Slots)

    NamePurpose
    default (no name)include label in default mode or for "on" state in toggle mode
    extrainclude icon or svg or image in default mode or for "on" state in toggle mode
    off-labelinclude label for "off" state in toggle mode
    off-extrainclude icon or svg or image for "off" state in toggle mode
    hover-labelinclude label in hover state
    hover-extrainclude icon or svg or image in hover state
    indeterminate-labelinclude label in indeterminate state
    indeterminate-extrainclude icon or svg or image in indeterminate state
    名称 目的
    默认(无名称) 默认模式下包含标签 ,或在切换模式下包含“ on”状态
    额外 默认模式下包含图标svg图像 ,在切换模式下包含“开启”状态
    关闭标签 切换模式下包含“关闭”状态的标签
    异地 切换模式下包含“关闭”状态的图标svg图像
    悬停标签 包括处于悬停状态的标签
    悬停 包括处于悬停状态的图标svg图像
    不确定标签 包括不确定状态的标签
    不确定的额外 包括处于不确定状态的图标svg图像

    翻译自: https://vuejsexamples.com/quickly-integrate-pretty-checkbox-components-with-vue-js/

    vue复选框组件

    展开全文
  • React Native Check Box,这是一款方便易用的Check Box组件,支持 Android 和 iOS。安装:npm i react-native-check-box --save import CheckBox from 'react-native-check-box'运行效果:基本用法:    ...
  • react-native-复选框 React Native的复选框组件 安装: 使用以下命令通过npm安装组件: npm install react-native-checkbox --save 例子: import CheckBox from 'react-native-checkbox' ; ...
  • Svelte的复选框组件(酷动画,可自定义)。 安装 yarn add svelte-checkbox 用法 < script > import Checkbox from "svelte-checkbox" ; let checked = false ; </ script > < Checkbox> 道具 ...
  • ReactNativeCircleCheckbox 用于 React Native 的圆形复选框组件。 安装 npm install react-native-circle-checkbox --save Usage import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox'; ...
  • 该插件是一个n级下拉复选框组件,解决需要划分多级功能的需求,如权限分配、商品划分等功能。 实现方式请查看laravel-admin官方文档有关Form表单的自定义组件。
  • Java Swing JCheckBox:复选框组件

    千次阅读 2019-03-05 23:07:28
    JCheckBox(复选框组件) 一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框。 1.1 构造函数 JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也...
  • 【微信小程序】复选框组件

    千次阅读 多人点赞 2018-05-09 15:36:53
    在工作中频繁用到复选框,于是自己写了个组件,增加其复用性,提高效率。先看效果图:提交后得到一个选中项的id组成的数组下边直接上代码:代码地址为:components/checkGrop/checkGropwxml:&lt;form bindsubmit...
  • 主要介绍了微信小程序 自定义复选框实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 一个简单且可完全自定义的React复选框输入组件。 安装 npm install --save react-custom-checkbox 或者 yarn add react-custom-checkbox 用法 import React from "react" ; import * as Icon from "react-icons/fi...
  • 角沙发复选框 角沙发复选框组件 安装 通过 npm: $ npm install angular-sofa-checkbox 通过鲍尔: $ bower install angular-sofa-checkbox
  • vue实现多种复选框,含搜索
  • 主要为大家详细介绍了react实现复选框全选和反选组件效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Bootstrap Checkbox 是复选框组件,基于 Bootstrap 框架。在线演示 标签:Bootstrap
  • 这是渲染的地方{{item.project_name}}这是data里的,report_project_ids是后台返回来的,他的格式是'[1,2]’这样的,report_project_idsArr是我转化成数组的格式[1,2]form: {report_name: "",report_pinyin: "",...
  • 快速将组件复选框,开关,单选按钮)与 Demo and documentation 安装 npm i -- save - dev pretty - checkbox - vue 浏览器 包括脚本文件,然后使用Vue.use(PrettyCheckbox);安装组件Vue.use(PrettyCheckbox); ...
  • 复选框的树形菜单-

    2019-02-23 04:40:11
    复选框的树形菜单,支持无限层级、绝对好用,有文档、有事例~功能非常强大
  • 本人在练习java的swing程序设计,想为窗体添加多个复选框组件,目标是达到下面图片的效果 ![CSDN移动问答][1] 我的源代码是这样的: import java.awt.BorderLayout; import java.awt.Container; import ...
  • Swing下拉多选复选框组件

    千次阅读 2020-05-15 17:24:14
    最近有个需求要用到Swing的下拉多选框组件,但是Swing是没有这种组件的 百度了一下看到有一个文章写了一个下拉多选组件,但是代码太多了,而且监听事件有些问题。 参考文章地址:...
  • “ 做好自己就好了呀 ”问题前段时间接到一个任务,需要做一个自定义的单选和多选按钮,但是之前都是用现成...兼容性由于在写组件时使用了flex布局,so 低版本浏览器不支持的哈,具体有关flex的知识可以学习一下阮大...
  • JCheckBox:复选框组件

    2020-06-13 00:59:26
    一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框。Swing中使用 JCheckBox 类实现复选框,该类的常用构造方法如下。 JCheckBox():创建一个默认的复选框,在默认情况下既未指定文本,也未指定图像,...
  • 是一个Web组件,提供了一个可访问且可自定义的复选框,是一部分。 < vaadin> Checked < vaadin> Unchecked < vaadin> Indeterminate 安装 安装vaadin-checkbox : npm i @vaadin/vaadin-checkbox --save 安装...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,929
精华内容 20,371
关键字:

复选框组件

友情链接: 全国图.rar