Boost Form Development Efficiency: WebBuilder Check & CheckGroup Components for Multi-Selection Business Scenarios

• Introduction: Pain Points of Traditional Multi-Selection Form Development
• Checkbox and multi-checkbox groups are core interactive components widely used in enterprise management systems, business forms, permission configuration, data filtering and other scenarios. Traditional front-end development often faces many unavoidable pain points when implementing multi-selection functions:
• Disunified styles for single checkboxes. Customization for labels, descriptive texts and layouts requires repeated CSS development for every business page.
• Cumbersome logical development for checkbox groups. Developers have to manually traverse checkbox nodes to obtain selected status, assign values and synchronize states, leading to massive redundant JavaScript code.
• Poor adaptability to backend data formats. Extra data conversion is needed between boolean values, integers, objects and ID arrays to match database storage and interface transmission rules.
• High development cost for interactive linkage. Status change monitoring, button linkage and popup prompt logic require independent event encapsulation.
• Chaotic layout adaptation. Layout collapse and spacing disorder frequently occur when combining checkboxes with grids, containers and inline layouts.
• WebBuilder provides a complete set of Check (single checkbox) and CheckGroup (checkbox group) low-code components. Based on configuration-driven development, these components cover all multi-selection demands from independent toggle switches to complex batch selection scenarios. They effectively cut front-end development workload while guaranteeing excellent usability, scalability and business compatibility.
• Check Component: Lightweight Independent Selection Control with Diversified Customization
• The Check component is an independent checkbox switch supporting single-item tick operation. Equipped with dozens of configurable native attributes, it delivers diversified display effects and data logic without handwritten CSS or JavaScript.
• Core Advantages
• Multi-form label & text configuration to match all UI design requirements
• Basic mode: Only checkbox + descriptive text for a concise switch display;
• External label mode: Separate field label and checkbox description to distinguish field names and option explanations;
• Label-only mode: Hide internal text and display only labels for cleaner page layout;
• Empty label adaptation: Enable showEmptyLabel to retain layout occupation for blank text scenarios and avoid page collapse.
• Customizable return data type to eliminate data type conversion
• Configure returnType: "int" to return integer 1 for checked status and 0 for unchecked status. It can be directly connected to integer boolean fields in databases without manual conversion between Boolean and integer types, simplifying backend docking.
• Native change event for real-time linkage interaction
• Built-in change event lifecycle automatically passes current value, old value and component instance. Combined with the native Wb.tip tool, you can pop up status prompts with one line of code to quickly realize linkage functions such as field show/hide and data refresh triggered by checkbox ticking.
• Seamless layout nesting compatibility
• The component can be directly embedded into grid layout containers, bordered Frame containers and spaced ControlCt composite containers. It supports horizontal arrangement with buttons and input boxes, and layout spacing can be quickly configured via the gap attribute for automatic alignment.
• Typical Application Scenarios
• System function switches, privacy agreement checkboxes, single-condition filters, independent permission activation switches, configuration item toggles, simple consent checkboxes.
• CheckGroup Component: Integrated Batch Multi-Selection Management to Simplify Complex Logic
• For permission multi-selection, multi-condition filtering, batch tag selection and other multi-option scenarios, CheckGroup centrally manages all internal Check components. It encapsulates one-stop APIs for batch value acquisition and assignment, completely eliminating manual traversal of checkbox collections.
• Core Advantages
• Centralized management of sub-components with automatic status synchronization
• All internal Check components are uniformly managed by CheckGroup. Developers can read and modify the selection status of all options through the component ID of the group without obtaining each checkbox instance separately. State changes are automatically synchronized to avoid data inconsistency bugs.
• Three assignment modes compatible with all front-end and back-end data formats
• Object assignment: {cid1:true,cid3:true}, intuitive key-value matching for component CID;
• Boolean array assignment: [false,1,"true"], batch setting selection status in the order of sub-components;
• ID array assignment: ["check1","check3"], quickly select specified items by passing the CID array of target checkboxes.
• Two output modes for flexible data formatting
• Enable returnAll: true for full data output. When paired with returnArray: true, the component directly returns an array of selected items without circular extraction. Disabling array mode returns a CID-Boolean key-value object. The two formats can be switched freely to adapt to different interface parameter specifications.
• Out-of-the-box APIs for one-line value reading and assignment
• Use the .value attribute for value acquisition and the .setValue() method for batch assignment. Components can be globally accessed via app.[Component CID], removing DOM query and component cache operations for concise and maintainable business code.
• Flexible combination layout for horizontal & vertical arrangement
• Support horizontal tiling via outer Row layout and vertical line break via Grid layout. Use Title and Label components for hierarchical description, and enable the Frame border of the outer container to build standardized form blocks rapidly.
• Typical Application Scenarios
• Role permission multi-selection, department multi-selection, approval process node ticking, data visible range configuration, material category multi-selection for manufacturing ERP/MES, multi-label selection for e-commerce backends, questionnaire multiple-choice questions.
• Ready-to-Use Demo Template: Full-Function Configuration for Direct Project Deployment
• WebBuilder provides a complete executable demo module covering all core functions of Check and CheckGroup:
• All display forms of the Check component: basic checkbox, labeled checkbox, label-only checkbox, empty label adaptation and integer return value configuration;
• Check interactive linkage demo: match buttons to read real-time checkbox values and pop up feedback prompts;
• Basic CheckGroup usage: object-based value acquisition and batch assignment;
• Advanced CheckGroup usage: array return output, array assignment, CID array assignment and mixed-value object assignment.
• All demos adopt configuration-based JSON development without redundant JavaScript logic. Developers can copy the configuration code directly into business projects for deployment and operation, avoiding repeated debugging and construction from scratch to shorten the development cycle significantly.
• Platform-Level Underlying Advantages Superior to Traditional Front-End Component Libraries
• Low-code configuration-driven development with zero threshold for front-end beginners
• All functions are implemented through JSON configuration. Business analysts and junior developers can build complex multi-selection interactions through drag-and-drop and simple attribute configuration without advanced JavaScript, DOM or CSS capabilities. Senior developers can also reuse configuration templates to accelerate project delivery.
• Global component access for ultra-simplified code writing
• All components are accessible globally via app.[Component CID], eliminating getElementById and component instance caching. Value reading and assignment can be completed with a single line of code to reduce maintenance difficulty.
• Built-in global tool capabilities for rapid interactive implementation
• Native integration of Wb.tip popup prompts and Wb.encode data serialization tools enables one-click popup display of multi-selection data for debugging and user prompts without introducing third-party popup libraries.
• Deep integration with the native layout system for unified page specifications
• Fully compatible with Viewport view containers, Grid layout, Container containers, ControlCt, Title and Label components. Spacing, borders and layout follow the unified UI specifications of WebBuilder to ensure consistent page style without additional style adaptation.
• Event lifecycle hosting to prevent memory leaks
• The platform automatically manages the lifecycle of events such as change and click. Event listening is automatically unbound when pages are destroyed to ensure long-term stable operation of back-office systems and avoid memory overflow caused by manually written event listeners.
• Cross-Industry Business Implementation Scenarios
• Government & Enterprise Management Systems
• Permission allocation multi-selection, department selection, approval process node ticking, data access scope configuration
• Manufacturing ERP & MES Systems
• Material category filtering, process selection, inspection condition multi-selection, equipment function switch configuration
• E-commerce Operation Backend
• Commodity tag selection, campaign condition ticking, user benefit switches, advanced filter multi-selection
• HR & OA Office Systems
• Post multi-selection, training course selection, benefit configuration, approval consent checkboxes
• Questionnaire & Form Platforms
• Survey multiple-choice questions, user preference selection, privacy authorization switches
• Conclusion: Cut Multi-Selection Development Costs by 50% with WebBuilder Check & CheckGroup
• In traditional development, a complex multi-selection form requires dozens of lines of JavaScript code to handle value acquisition, assignment, state synchronization, popup interaction and layout styling. With WebBuilder’s matched Check and CheckGroup components, equivalent or richer functions can be realized purely through JSON configuration. The components come with official demo templates, multi-format data compatibility, unified layout specifications and stable underlying lifecycle hosting.
• Whether you need a simple single toggle switch or a complex batch multi-selection business module, the combination of Check and CheckGroup can cover all requirements in one stop. It balances development efficiency, user interaction experience and front-end-backend data docking convenience, making it the optimal multi-selection interactive solution for enterprise-level low-code platform forms.
• Full Executable Demo Source Code

({
  cname: "module",
  cid: "module",
  items : [{
    cname: "viewport",
    cid: "viewport1",
    layout: "grid1",
    items : [{
      cname: "label",
      cid: "mainLabel",
      text: "Check, radio, toggle and slider",
      cls: "w-title3"
    },
    {
      cname: "title",
      cid: "checkTitle",
      title: "Check"
    },
    {
      cname: "container",
      cid: "checkCt",
      layout: "grid1",
      frame: true,
      items : [{
        cname: "check",
        cid: "commonCheck",
        text: "Common check",
        events: {
          change(value, oldValue, options){
            Wb.tip(this.cid + ' value is ' + value);
          }
        }
      },
      {
        cname: "check",
        cid: "labelCheck",
        text: "With label",
        label: "Label check",
        value: true
      },
      {
        cname: "check",
        cid: "onlyLabelCheck",
        label: "Only label check"
      },
      {
        cname: "check",
        cid: "onlyLabelEmptyTextCheck",
        label: "Only label check with empty text",
        showEmptyLabel: true
      },
      {
        cname: "controlCt",
        cid: "intValueCt",
        gap: "1em",
        showEmptyLabel: true,
        items : [{
          cname: "check",
          cid: "intValueCheck",
          returnType: "int",
          label: "return int value"
        },
        {
          cname: "button",
          cid: "getValueBtn",
          text: "Get value",
          events: {
            click(e, options){
              Wb.tip('The value is ' + this.previousSibling.value);
            }
          }
        }
        ]
      }
      ]
    },
    {
      cname: "title",
      cid: "checkGroupTitle",
      title: "CheckGroup"
    },
    {
      cname: "container",
      cid: "checkGroupCt",
      layout: "grid1",
      frame: true,
      items : [{
        cname: "label",
        cid: "commonCheckGroupLabel",
        text: "Common checkGroup"
      },
      {
        cname: "container",
        cid: "commonCheckCt",
        gap: "1em",
        layout: "row",
        items : [{
          cname: "checkGroup",
          cid: "commonCheckGroup",
          items : [{
            cname: "check",
            cid: "check1",
            label: "item 1"
          },
          {
            cname: "check",
            cid: "check2",
            label: "item 2",
            value: true
          },
          {
            cname: "check",
            cid: "check3",
            label: "item 3",
            value: true
          }
          ]
        },
        {
          cname: "button",
          cid: "getValueBtn",
          text: "Get value",
          events: {
            click(e, options){
              Wb.tip(Wb.encode(app.commonCheckGroup.value));
            }
          }
        },
        {
          cname: "button",
          cid: "setValueBtn",
          text: "Set value",
          events: {
            click(e, options){
              app.commonCheckGroup.setValue({ check1: true, check3: true });
            }
          }
        }
        ]
      },
      {
        cname: "label",
        cid: "allCheckGroupLabel",
        text: "Return all and return array value checkGroup"
      },
      {
        cname: "container",
        cid: "allCheckCt",
        gap: "1em",
        layout: "row",
        items : [{
          cname: "checkGroup",
          cid: "allCheckGroup",
          returnAll: true,
          returnArray: true,
          items : [{
            cname: "check",
            cid: "check1",
            label: "item 1"
          },
          {
            cname: "check",
            cid: "check2",
            label: "item 2",
            value: true
          },
          {
            cname: "check",
            cid: "check3",
            label: "item 3",
            value: true
          }
          ]
        },
        {
          cname: "button",
          cid: "getValueBtn",
          text: "Get value",
          events: {
            click(e, options){
              Wb.tip(Wb.encode(app.allCheckGroup.value));
            }
          }
        },
        {
          cname: "button",
          cid: "setValueObjectBtn",
          text: "Set value by object",
          events: {
            click(e, options){
              app.allCheckGroup.setValue({ check1: true, check3: 'true' });
            }
          }
        },
        {
          cname: "button",
          cid: "setValueArrayBtn",
          text: "Set value by array",
          events: {
            click(e, options){
              app.allCheckGroup.setValue([false, 1, 'true']);
            }
          }
        },
        {
          cname: "button",
          cid: "setValueCidsBtn",
          text: "Set value by cids",
          events: {
            click(e, options){
              app.allCheckGroup.setValue(['check1', 'check3'] );
            }
          }
        }
        ]
      }
      ]
    }
  ]}
]
})