CheckBoxGroup

之前做个一个投票应用,投票可以多选,但是又有上限,比如5选3,跟多选题一样。当时就写了个组合控件。
关键代码如下:

    public void init(List<String> texts, int maxCheckedNum) {
        setOrientation(VERTICAL);

        this.maxCheckedNum = maxCheckedNum;

        if (maxCheckedNum == 1) {
            for (int i = 0; i < texts.size(); i++) {
                RadioButton radioButton = new RadioButton(getContext());
                radioButton.setText(texts.get(i));
                radioButton.setTag(i);
                radioButton.setOnCheckedChangeListener(this);
                addView(radioButton, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            }
        } else {
            for (int i = 0; i < texts.size(); i++) {
                CheckBox checkBox = new CheckBox(getContext());
                checkBox.setText(texts.get(i));
                checkBox.setTag(i);
                checkBox.setOnCheckedChangeListener(this);
                addView(checkBox, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            }
        }
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (maxCheckedNum == 1) {
            if (isChecked) {
                if (currentCheckedRadioButton != null) {
                    currentCheckedRadioButton.setChecked(false);
                }
                currentCheckedRadioButton = buttonView;
                checkedPositions.clear();
                checkedPositions.add((Integer) buttonView.getTag());
            } else {
                currentCheckedRadioButton = null;
                checkedPositions.clear();
            }
        } else {
            if (isChecked) {
                if (checkedPositions.size() < maxCheckedNum) {
                    checkedPositions.add((Integer) buttonView.getTag());
                } else {
                    Toast.makeText(getContext(), "You cann't select more!", Toast.LENGTH_SHORT).show();
                    buttonView.setChecked(false);
                }
            } 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CheckboxGroup组件没有直接提供事件,但可以使用Checkbox组件的onChange事件来处理CheckboxGroup的事件。 要处理CheckboxGroup的事件,需要在CheckboxGroup的父组件中监听Checkbox的onChange事件。当Checkbox的选中状态改变时,会触发onChange事件,然后可以在事件处理函数中获取到选中的Checkbox的值。 以下是处理CheckboxGroup事件的一个示例代码: ```javascript import React, { useState } from 'react'; import { Checkbox } from 'antd'; const CheckboxGroup = Checkbox.Group; const options = [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Orange', value: 'orange' }, ]; const MyComponent = () => { const [checkedValues, setCheckedValues = useState([]); const handleCheckboxChange = (checkedValues) => { setCheckedValues(checkedValues); }; return ( <CheckboxGroup options={options} value={checkedValues} onChange={handleCheckboxChange} /> ); }; ``` 在上面的示例代码中,我们使用了`useState` Hook来保存选中的Checkbox的值。当Checkbox的选中状态改变时,`handleCheckboxChange`函数会被调用,并更新`checkedValues`的值。 这样就能够处理CheckboxGroup的事件了。可以根据具体需求在`handleCheckboxChange`函数中进行处理,比如根据选中的值来更新其他状态或执行其他操作。 : 注意一定要阻止冒泡事件,我在.act-view-answer类里加了pointer-events: none;,然后又在.checkBox取消阻止冒泡 pointer-events: visible; 不然用户手误点到正方形外部也会改变checkBox的样式,导致互斥事件的样式没有发生改变。 : 文章目录 一.basic基础组件Button 按钮Link 文字链接 二.Form 表单Radio 单选框Checkbox 多选框Input 输入框InputNumber 计数器Select 选择器Cascader 级联选择器Switch 开关Slider 滑块TimePicker 时间选择器DatePicker 日期选择器DateTimePicker 日期时间选择器Upload 上传Rate 评分ColorPicker 颜色选择器Transfer 穿梭框Form 表单 三.data 数据Table 表格Tag 标签Progress 进度条Tree 树形控件Pagination 分页Badge 标记Avatar 头像 四.Notice 通知Alert 警告Loading 加载Message 消息提示MessageBox 弹框Notification 通知 五.Navigation导航NavMenu 导航菜单Tabs 标签页Breadcrumb 面包屑PageHeader 页头Dropdown 下拉菜单Steps 步骤条 六.other其他组件Dialog 对话框Tooltip 文字提示Popover 弹出框Popconfirm 气泡确认框Card 卡片Carousel 走马灯Collapse 折叠面板Timeline 时间线Divider 分割线Calendar 日历Image 图片Backtop 回到顶部InfiniteScroll 无限滚动Drawer 抽屉

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值