javascript - 如何触发自定义复选框小部件-6ren

javascript - 如何触发自定义复选框小部件

转载作者：行者123 更新时间：2023-11-30 19:43:37

我正在使用这个 widget我在网上找到的，它使复选框看起来像 iOS 开关。我正在尝试根据我在其他地方的变量将开关关闭为打开或关闭。问题是，如果我使用 checkbox.click()，则小部件的基础复选框会更改，但不会触发开关。我正在尝试使用这个特定事件来了解更多关于我在 JS 中不知道的内容，特别是如何触发小部件动画。这个小部件的 js 非常困惑，我以为我可以通过 click() 或 onclick() 触发动画，但都不起作用。我不知道如何继续。

下面附有一个最低限度的工作示例。只需将 repo 下载到名为 simple_switch_master 的文件夹中，然后将这些文件添加到同一目录中即可!

html 文件，index.html:

<html>
<head>
    // Load in libraries
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js">    </script>
    <script src="./simple-switch-master/jquery.simpleswitch.js"></script>
    <link rel="stylesheet" href="./simple-switch-master/simple-switch.css" />
</head>

<body>
    <div><input id=toggle  type="checkbox" class="mybox"></div>

    <script src="./control.js"></script>
    <script>
        $(".mybox").simpleSwitch();
    </script>
</body>
</html>

Javascript 文件，control.js:

var checkbox = document.getElementById("toggle");
console.log(checkbox.checked) // Returns false as expected
checkbox.click()
console.log(checkbox.checked) // Returns true even though the switch is off

最佳答案

在某些版本的 jQuery 中，如果您使用 checkbox.checked 将返回此元素的初始状态(如果它以此值开头，则有时为 true)，而不更改。但是，某些版本可以修改此值。

如果要改变状态，可以使用$("#elementID").prop("checked")

您可以在 http://api.jquery.com/prop/ 查看这些详细信息和属性之间的差异

关于javascript - 如何触发自定义复选框小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55152412/