博客

jQWidgets jqxSwitchButton uncheck()方法

  • Post category:jquery

jQWidgets jqxSwitchButton uncheck()方法详解

uncheck()方法是jQWidgets jqxSwitchButton组件的一个方法，用来取消已选中的开关按钮状态，将其恢复为未选中状态。该方法只适用于开关按钮，而对于其他类型的按钮无效。下面我们来详细了解一下该方法的使用。

方法语法

$('#switchButton').jqxSwitchButton('uncheck');

方法参数

该方法无需传递任何参数。

方法返回值

该方法无返回值。

注意事项

  • 在使用uncheck()方法前，确保该开关按钮已经有选中状态（选中了ON选项），否则该方法将无效。
  • 在使用uncheck()方法时，确保该开关按钮是可用的（disabled属性为false），否则该方法也将无效。

下面我们通过两个示例代码来详细说明该方法的使用：

示例一

该示例演示如何使用uncheck()方法，取消已选中的开关按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqxbuttons.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqx.base.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqx.bootstrap.css" />
    <style>
        .container {
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="switchButton">ON</div>
        <button id="uncheckButton">取消选中</button>
    </div>
    <script>
        $(document).ready(function () {
            $('#switchButton').jqxSwitchButton({ width: '80px', height: '34px', checked: true });
            $('#uncheckButton').click(function () {
                $('#switchButton').jqxSwitchButton('uncheck');
            });
        });
    </script>
</body>
</html>

在该示例中，我们创建了一个开关按钮，并在页面加载完成后，调用了uncheck()方法，将其恢复为未选中状态。同时，我们也为该开关按钮添加了一个用于调用uncheck()方法的按钮。

示例二

该示例演示了如何使用回调函数，在取消开关按钮选中状态之后，执行一些操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例二</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqxbuttons.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqx.base.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.7/jqx.bootstrap.css" />
    <style>
        .container {
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="switchButton">ON</div>
    </div>
    <script>
        $(document).ready(function () {
            $('#switchButton').jqxSwitchButton({ width: '80px', height: '34px', checked: true });
            $('#switchButton').on('unchecked', function (event) {
                console.log('已取消开关按钮选中状态');
            });
            $('#switchButton').jqxSwitchButton('uncheck');
        });
    </script>
</body>
</html>

在该示例中，我们也创建了一个开关按钮，并在其unchecked事件中添加了一个回调函数，当取消选中状态之后，该回调函数将会被执行。同时，在页面加载完成后，我们也调用了uncheck()方法，将其恢复为未选中状态。

总结

本篇攻略详细讲解了jQWidgets jqxSwitchButton组件的uncheck()方法的使用及相关注意事项，同时还提供了两个示例代码，希望能够为开发者们提供一些帮助。

Tags: