Search results

Show ButtonGroup selected state on initial render in JavaScript ButtonGroup control

06 Jun 2023 / 1 minute to read

To show selected state on initial render, checked property should to added to the corresponding input element.

The following example illustrates how to show selected state on initial render.

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>EJ2 Button-Group</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='e-btn-group'>
            <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
            <label class="e-btn" for="checkbold">Bold</label>
            <input type="checkbox" id="checkitalic" name="font" value="italic" />
            <label class="e-btn" for="checkitalic">Italic</label>
            <input type="checkbox" id="checkline" name="font" value="underline"/>
            <label class="e-btn" for="checkline">Underline</label>

Copied to clipboard
#container {
    visibility: hidden;

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
.e-btn-group {
  margin: 25px 5px 20px 20px;