Javascript 如何使用切换按钮？

我正在进行一个使用以太网屏蔽的Arduino项目。Adruino连接到我的笔记本电脑（服务器）并读取一个文件，告诉它打开或关闭继电器

用户界面是一个HTML页面。有打开和关闭值的提交表单。这些值被发送到处理程序页面进行处理，以便Arduino可以读取

我想使用一个CSS/JavaScript样式的切换按钮来替换外观丑陋的提交按钮

---

这是我想用的按钮。如何提取切换状态的值并在我的HTML页面上实现它？

1以某种方式存储系统的状态

您可以为此使用数据库、文件和服务

2Arduino应通过脚本连接到您的服务器

此脚本用于将系统状态返回到设置的任何值

3创建用户界面

这可以是另一个PHP脚本。它应该显示你的按钮

4使用jQuery捕获点击事件。

---

然后调用服务器并更改系统状态，服务器应返回新状态，使用ajax成功回调函数检查新状态并更新用户界面（如果状态无法持久化，则必须再次执行此操作，以防止用户界面失步）

，使用JavaScript需要使用Ajax，这一点我并不熟悉。我还建议使用写入文本文件，而不是使用Arduino的文件。为了保护用户，难道不可能像任何使用PHPAPI的服务器一样向Arduino发送请求吗

<?php
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'http://192.168.0.5');//depending on your arduino's address
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $_POST['on/off']);
    //You may want to validate your variables.
?>

---

Xocoatzin的解决方案是好的。但是如果你喜欢纯CSS的话，这里有一个解决方案

有一个隐藏的

输入

类型

复选框

：

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch1" checked="">

---

它可以用于在服务器端以及其他脚本上获取值。

您需要为切换按钮单击创建一个JavaScript事件处理程序。Ajax请求应该转到一个页面，然后该页面将切换/设置按钮状态。您需要某种方式来存储按钮的状态，也许只是一个文件？不需要太复杂。

使用单选按钮隐藏并在单击时切换值。

<script>
    function send(){
        document.toggleForm.submit();
    }
</script>

<style>
    #on{background:#00FFFF;content:'On';}
    #off{background:#00FFFF;content:'Off';}
</style>

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch1" checked="">