Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to design checkbox selection for webpage using jQuery EasyUI ?

  • Last Updated : 17 Dec, 2020

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn to design single and multiple select checkboxes using jQuery EasyUI plugin.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Downloads for EasyUI for jQuery:

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

Note: Please take care of proper file paths while implementing the following codes.



Example 1: The following code demonstrates single select and de-select of checkboxes for datagrids implemented for a webpage. It also provides multiple select and de-select of checkboxes in out UI component.

html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" src="jquery.easyui.min.js">
    </script>
  
</head>
  
<body>
    <h2>jQuery EasyUI Datagrid checkbox</h2>
      
<p>Click the checkbox to select or de-select.</p>
  
  
    <table id="tableID" class="easyui-datagrid" 
        title="Datagrid CheckBox Selection" 
        style="width:470px;height:400px"
        data-options="rownumbers:false,singleSelect:true,
            url:'datafile.json',method:'get',border:false">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'studentid',width:80">
                    <b>Student ID</b>
                </th>
                <th data-options="field:'studentname',width:120">
                    <b>Student Name</b>
                </th>
                <th data-options="field:'age',
                    width:80,align:'center'">
                    <b>Age</b>
                </th>
                <th data-options="field:'marksscored',
                                 width:100,align:'center'">
                    <b>Marks Scored</b>
                </th>
                <th data-options="field:'gender',
                    width:60,align:'center'">
                    <b>Gender</b>
                </th>
            </tr>
        </thead>
    </table>
  
    <div style="margin:10px 0;">
        <span>Selection Mode: </span>
  
        <select onchange="$('#tableID')
            .datagrid({singleSelect:(this.value==0)})">
  
            <option value="0">Select Single Row</option>
            <option value="1">Select Multiple Rows</option>
        </select><br />
  
        Check On Select: <input type="checkbox" checked
            onchange="$('#tableID').datagrid(
                {checkOnSelect:$(this).is(':checked')})">
        <br />
  
        Select On Check: <input type="checkbox" checked
            onchange="$('#tableID').datagrid(
                {selectOnCheck:$(this).is(':checked')})">
        <br />
    </div>
</body>
  
</html>

Output: 

  • Datagrid checkbox screen: 

  • Datagrid checkbox execution: 

 

Example 2: 

html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
</head>
  
<body>
    <h2>jQuery EasyUI Datagrid selection</h2>
  
      
<p>
        Click the buttons to get data after 
        single/multiple selection.
    </p>
  
      
    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" 
            onclick="getSelectedData()">
            GetSelected
        </a>
          
        <a href="#" class="easyui-linkbutton" 
            onclick="getMultipleData()">
            GetSelections
        </a>
    </div>
  
    <table id="tableID" class="easyui-datagrid" 
        title="Datagrid CheckBox Selection" 
        style="width:470px;height:400px"
        data-options="rownumbers:false,
            singleSelect:true, url:'datafile.json',
            method:'get', border:false">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'studentid',width:80">
                    <b>Student ID</b>
                </th>
                <th data-options="field:'studentname',width:120">
                    <b>Student Name</b>
                </th>
                <th data-options="field:'age',
                    width:80,align:'center'">
                    <b>Age</b>
                </th>
                <th data-options="field:'marksscored',
                    width:100, align:'center'">
                    <b>Marks Scored</b>
                </th>
                <th data-options="field:'gender',
                    width:60,align:'center'">
                    <b>Gender</b>
                </th>
            </tr>
        </thead>
    </table>
    <div style="margin:10px 0;">
        <span>Single/Multiple Mode: </span>
        <select onchange="$('#tableID').datagrid({
            singleSelect:(this.value==0)})">
              
            <option value="0">Single Row</option>
            <option value="1">Multiple Rows</option>
        </select><br />
    </div>
  
    <script>
        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/>'));
        }
    </script>
</body>
  
</html>

Output: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!