Open In App

jQuery Mobile Flipswitch option() Method

Last Updated : 20 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

JQuery UI  is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.

In this article, we are going to learn the jQuery Mobile Flipswitch option() method. Using this method, we can get, set or update any parameter’s value of the Flipswitch widget. We can also get all the options as key-value pairs using this method.

Syntax:

1. If the user wants any option’s value, the option name should be passed in the option(optionName) method. The optionName should be a string type.

var isEnhanced = $("Selector").flipswitch("option", "enhanced");

Parameter:

  • optionName: This parameter is the input that we need to pass in the form of a string for which we need to get the value.

Return type: We get the respective return value based on the option data type.

2. To get all the options as the key-value pairs, you just need to call the option() method with no parameter is passed to the method.

var isEnhanced = $("Selector").flipswitch("option", "enhanced");

Return type: This method returns the list of key-value pairs of all the options as optionName-optionValue pairs set.

3. To set the value of any option, you just need to call the option(optionName, value) with the optionName and the value as the parameters.

$("Selector").flipswitch("option", "enhanced", "false");

Parameters:

  • optionName: The option method required the option name as the first parameter and this parameter is of string type.
  • value: The option method required the option’s name as the second parameter and this parameter is of string type.

4. We can also set multiple options instead of only one, you just need to call the option(options) method where options are the list of options.

$("Selector").flipswitch("option", {enhanced: false, disabled: true});

Parameter:

  • option: It is the map of the optionName-value pairs as input to set the options corresponding to the values passed, which is of the object type.

Return type: This method returns the list of key-value pairs of all the options as optionName-optionValue pairs set.

CDN Link: Following are some jQuery Mobile scripts that you will be needed for your project so add these scripts into your project.

<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

 Example: This example describes the uses of the jQuery Mobile Flipswitch option() method.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href=
    <script src=
    </script>
    <script src=
    </script>
      
    <script>
    $(document).ready(function() {
        $("#GFG").flipswitch("enable");
        $("#btn").on('click', function() {
            var options = $("#GFG").flipswitch("option");
            document.getElementById('gfg').innerHTML +=
                "No of key/value pair present : " + 
                    Object.keys(options).length + "<br>";
        })
    });
    </script>
</head>
  
<body>
    <center>
        <div data-role="page">
            <div data-role="header">
                <h1 style = "color:green;">GeeksforGeeks</h1>
                <h3>jQuery Mobile Flipswitch option() Method</h3>
            </div>
            <div class="ui-field-contain">
                <form>
                    <div data-role="fieldcontain">
                        <label for="GFG">
                            Flipswitch Checkbox:
                        </label>
                        <input type="checkbox"
                            id="GFG"
                            data-role="flipswitch">
                    </div>
                </form>
            </div>
            <input type="button"
                id="btn"
                style="width: 250px;"
                value="Option">
            <h4><span id="gfg"></span></h4>
        </div>
    </center>
</body>
  
</html>


Output:

jQuery Mobile Flipswitch option() Method

jQuery Mobile Flipswitch option() method

Reference: https://api.jquerymobile.com/flipswitch/#method-option



Previous Article
Next Article

Similar Reads

jQuery Mobile Flipswitch Widget defaults Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget defaults Option with true value to set the other widgets options that have default values and cause widget autoenhancement code to omit the step whe
1 min read
jQuery Mobile Flipswitch Widget corners Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget corners Option to set the corner of border-radius. It accepts boolean type value and its default value is true. Syntax: $( ".selector" ).flipswitch(
1 min read
jQuery Mobile Flipswitch Widget onText Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget onText Option to set the label text on the flip switch when it is in the "ON" state. It accepts string type value and its default value is "On". Syn
1 min read
jQuery Mobile Flipswitch Widget theme Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Flipswitch Widget theme option to set the color scheme for the flipswitch widget. Its possible value is a character that lies between "a - z". It accepts string t
1 min read
jQuery Mobile Flipswitch Widget offText Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget offText Option to set the label text on flipswitch when flipswitch is in "OFF" state. It accepts string type value and its default value is "Off". S
1 min read
jQuery Mobile Flipswitch Widget mini Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget mini option to display the compact flipswitch widget. If this option value is set to true, it will display the compact version of the button i.e. th
1 min read
jQuery Mobile Flipswitch Widget enhanced Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget enhanced Option that indicates the markup that is necessary for a flipswitch widget that has been provided as part of the original markup. It accept
1 min read
jQuery Mobile Flipswitch Widget disabled Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget disabled Option to disable the flipswitch widget. It accepts boolean type value and its default value is false. Syntax: $( ".selector" ).flipswitch(
1 min read
jQuery Mobile Flipswitch classes Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Flipswitch classes option to specify additional classes to add to the widget elements. Syntax: $( ".selector" ).flipswitch({ classes: { "ui-flipswitch": "highligh
1 min read
jQuery Mobile Flipswitch wrapperClass Option
jQuery Mobile is a set of HTML5 based user interface systems developed to create responsive and accessible content for smartphones, tablets, and desktops. It is built on top of jQuery. In this article, we will be using the jquery Mobile Flipswitch wrapperClass option. It is used to specify one or more space-separated class names for the div wrappin
2 min read