如何使用 jQuery EasyUI 设计网页的复选框选择？

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

在本文中，我们将学习使用jQuery EasyUI插件设计单选和多选复选框。

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

注意：在执行以下代码时，请注意正确的文件路径。

示例 1：以下代码演示了为网页实现的数据网格的单选和取消选择复选框。它还提供了多个选择和取消选择 UI 组件中的复选框。

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
    
    
    
  

  

    jQuery EasyUI Datagrid checkbox
      
Click the checkbox to select or de-select.
  
  
    
        
            
                
                
                
                
                
                
            
        
    
                    Student ID
                
                    Student Name
                
                    Age
                
                    Marks Scored
                
                    Gender
                
  
    
        Selection Mode: 
  
        
  
            Select Single Row
            Select Multiple Rows
        
  
        Check On Select: 
        
  
        Select On Check: 
        
    

  

输出：

• 数据网格复选框屏幕：

• 数据网格复选框执行：

示例 2：

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
    
    
    
  

  

    jQuery EasyUI Datagrid selection
  
      

        Click the buttons to get data after 
        single/multiple selection.
    
  
      
    
        
            GetSelected
        
          
        
            GetSelections
        
    
  
    
        
            
                
                
                
                
                
                
            
        
    
                    Student ID
                
                    Student Name
                
                    Age
                
                    Marks Scored
                
                    Gender
                
    
        Single/Multiple Mode: 
        
              
            Single Row
            Multiple Rows
        
    
  
    
        function getSelectedData() {
            var row = $('#tableID').datagrid('getSelected');
            if (row) {
  
                /* If row is selected, it displays data */
                $.messager.alert('Details', row.studentid 
                    + ":" + row.studentid + ": " 
                    + ",Gender: " + row.gender + ",Name: "
                    + row.studentid + ": " + row.studentname);
            }
        }
        function getMultipleData() {
  
            /* This array is used to push data */
            var resultArray = [];
  
            var rows = $('#tableID')
                .datagrid('getSelections');
  
            /* Traversing through multiple selection */
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
  
                /* Push multiple selection in 
                    result array */
                resultArray.push('<span>' + row.studentid 
                    + ":" + row.studentid + ": " + 
                    ", Gender:" + row.gender + ", Name: "
                    + row.studentid + ": " 
                    + row.studentname + '</span>');
            }
  
            $.messager.alert('Details', 
                resultArray.join('<br/>'));
        }
    

  

输出：