Search results

Show ButtonGroup selected state on initial render in JavaScript (ES5) ButtonGroup control

19 Oct 2021 / 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"><head>
    <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="" type="text/javascript"></script>

    <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>

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>
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;