JQuery UI Control groups

In this article, we will understand how to create a JQuery UI control group with the help of various examples. Control groups combine various controls such as radio buttons, checkboxes, drop-down lists, text boxes, and submit. We can also destroy the control group and completely removes its functionality by using the destroy method. There is also an option try again button that reloads the page.

Following are the various examples of JQuery UI control groups.

Example 1:

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
    .ui-controlgroup-vertical {
      width: 150px;
    }
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
      text-align: center;
    }
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
      text-align: center;
    }
    #car-type-button {
      width: 120px;
    }
button {
  display: inline-block;
  width: 150px;
  height: 30px;
  text-align: center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all .3s ease;
  font-family: 'arial'
}
button .rotate-button-face  {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face-back {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face {
  background-color: #fff;
  transform: translateZ(15px);
}
button .rotate-button-face-back {
  background-color: #35495e;
  color: #42b883;
  border: 1px solid #42b883;
  transform: rotateX(-90deg) translateZ(15px);
}
button:hover {
  transform: rotateX(90deg);
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
    .ui-controlgroup-horizontal .ui-spinner-input {
      width: 20px;
    }
  </style>
  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ".controlgroup-vertical" ).controlgroup({
      "direction": "vertical"
    });
  } );
  </script>
</head>
<body>
<div class = "widget">
  <h1> Example of jQuery UI </h1>
  <h2> Controlgroups </h2>
  <br> 	
  <fieldset>
    <legend> TAKE ADMISSION </legend>
	<h3> Select a Course </h3>
    <div class = "controlgroup-vertical">
      <select>
        <option> BA </option>
        <option> BCA </option>
        <option> BSC </option>
        <option> BSC IT  </option>
        <option> BCOM </option>
        <option> MA </option>
        <option> MCA </option>
		 <option> MSC </option>
		 <option> MSC IT  </option>
        <option> MCOM </option>
      </select>
	  <h3> Select Gender </h3>
      <label for = "transmission-standard-v"> Male </label>
      <input type = "radio" name="transmission-v" id = "transmission-standard-v">
      <label for="transmission-automatic-v"> Female </label>
      <input type = "radio" name="transmission-v" id = "transmission-automatic-v">
      <label for = "vertical-spinner" class = "ui-controlgroup-label"> No of students </label>
      <input id = "vertical-spinner" class = "ui-spinner-input">
	  <label for = "insurance-v"> Agree the terms and conditions </label>
      <input type = "checkbox" name = "insurance" id = "insurance-v">
	  <br>
      <button> Submit Data </button>
    </div>
  </fieldset>
</div> 	
</body>
</html>

Explanation:

In the above example, we have created an example of JQuery UI control groups. It display the control groups in a vertical direction by specifying the direction vertical in the following jQuery code.

  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ".controlgroup-vertical" ).controlgroup({
      "direction": "vertical"
    });
  } );

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
    .ui-controlgroup-vertical {
      width: 150px;
    }
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
      text-align: center;
    }
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
      text-align: center;
    }
    #car-type-button {
      width: 120px;
    }
button {
  display: inline-block;
  width: 150px;
  height: 30px;
  text-align: center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all .3s ease;
  font-family: 'arial'
}
button .rotate-button-face  {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face-back {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face {
  background-color: #fff;
  transform: translateZ(15px);
}
button .rotate-button-face-back {
  background-color: #35495e;
  color: #42b883;
  border: 1px solid #42b883;
  transform: rotateX(-90deg) translateZ(15px);
}
button:hover {
  transform: rotateX(90deg);
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
#car-type-button {
      width: 120px;
    }
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
    .ui-controlgroup-horizontal .ui-spinner-input {
      width: 20px;
    }
  </style>
  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ". widget " ).controlgroup({      
    });
  } );
  </script>
</head>
<body>
<div class = "widget">
  <h1> Example of jQuery UI </h1>
  <h2> Controlgroups </h2>
  <br> 	
  <fieldset>
   <legend> TAKE ADMISSION </legend>	
    <div class = "controlgroup">
      <select id = "car-type">
	<option> Select a Course </option>
        <option> BA </option>
        <option> BCA </option>
        <option> BSC </option>
        <option> BSC IT  </option>
        <option> BCOM </option>
        <option> MA </option>
        <option> MCA </option>
		 <option> MSC </option>
		 <option> MSC IT  </option>
        <option> MCOM </option>
      </select>
      <label for = "transmission-standard"> Male </label>
      <input type = "radio" name = "transmission" id = "transmission-standard">
      <label for = "transmission-automatic"> Female </label>
      <input type = "radio" name = "transmission" id = "transmission-automatic">     
      <label for="horizontal-spinner" class="ui-controlgroup-label"> No of students </label>
      <input id="horizontal-spinner" class="ui-spinner-input">
	   <label for = "insurance"> Agree the terms and conditions </label>
      <input type = "checkbox" name = "insurance" id = "insurance"> <br> <br>
      <button> Submit Data </button>
    </div>
  </fieldset>
</div> 	
</body>
</html> 

Explanation:

In the above example, we have created an example of JQuery UI control groups. It display the control groups in a horizontal direction.

<script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ". widget " ).controlgroup({      
    });
  } );
  </script>

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
    .ui-controlgroup-vertical {
      width: 150px;
    }
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
      text-align: center;
    }
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
      text-align: center;
    }
    #car-type-button {
      width: 120px;
    }
button {
  display: inline-block;
  width: 150px;
  height: 30px;
  text-align: center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all .3s ease;
  font-family: 'arial'
}
button .rotate-button-face  {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face-back {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face {
  background-color: #fff;
  transform: translateZ(15px);
}
button .rotate-button-face-back {
  background-color: #35495e;
  color: #42b883;
  border: 1px solid #42b883;
  transform: rotateX(-90deg) translateZ(15px);
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
#car-type-button {
      width: 120px;
    }
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
    .ui-controlgroup-horizontal .ui-spinner-input {
      width: 20px;
    }
  </style>
  <script>
   $(document).ready(function() {
                $(". control_group1").controlgroup({})
                $('#my_button').click(function() {
                    $(". control_group1").controlgroup("destroy");
                })
            })
  </script>
</head>
<body>
<div class = "control_group1">
  <h1> Example of jQuery UI </h1>
  <h2> Control groups with destroy functionality </h2>
  <br> 	
  <fieldset>
   <legend> TAKE ADMISSION </legend>	
    <div class = "controlgroup">
      <select id = "car-type">
	<option> Select a Course </option>
        <option> BA </option>
        <option> BCA </option>
        <option> BSC </option>
        <option> BSC IT  </option>
        <option> BCOM </option>
        <option> MA </option>
        <option> MCA </option>
		 <option> MSC </option>
		 <option> MSC IT  </option>
        <option> MCOM </option>
      </select>
      <label for = "transmission-standard"> Male </label>
      <input type = "radio" name = "transmission" id = "transmission-standard">
      <label for = "transmission-automatic"> Female </label>
      <input type = "radio" name = "transmission" id = "transmission-automatic">
      <label for = "horizontal-spinner" class = "ui-controlgroup-label"> No of students </label>
      <input id = "horizontal-spinner" class = "ui-spinner-input">
	   <label for = "insurance"> Agree the terms and conditions </label>
      <input type = "checkbox" name = "insurance" id = "insurance"> <br> <br>
	    <button id = "my_button"> Destroy </button>
        <a href=''>
            <button type =' button'> Try again: Refresh </button>
        </a>
      <button> Submit Data </button>
    </div>
  </fieldset>
</div> 	
</body>
</html>

Explanation:

In the above example, we have created an example of JQuery UI control groups with destroy and try again functionality. Following code displays the working of destroy and try again button functionality.

$(document).ready(function() {
                $(". control_group1").controlgroup({})
                $('#my_button').click(function() {
                    $(". control_group1").controlgroup("destroy");
                })
            })

Output:

When we click the destroy method, the CSS is removed from the control groups. The following figure displays the output.