如何用Checkbox/Slider触发PHP代码控制树莓派灯光？

问题背景 #

我是首次发帖的Web开发新手，已经试过谷歌搜索和看视频，但代码还是跑不起来。我做了个基础网站，通过树莓派上的Apache服务器控制灯光开关：用普通按钮时PHP代码正常，能顺利开关灯，代码如下：

</head>
<body>
<center><h1>on or off... yes this is all it does</h1>
<form method="get" action="index.php">
        <input type="submit" style = "font-size: 14 pt" value="OFF" name="off">
        <input type="submit" style = "font-size: 14 pt" value="ON" name="on">
        </form>
                </centre>
<?php
        shell_exec("/usr/local/bin/gpio -g mode 17 out");
        if(isset($_GET['off']))
                {
                        echo "Light is off";
                        shell_exec("/usr/local/bin/gpio -g write 17 0");
                }
                        else if(isset($_GET['on']))
                        {
                                echo "Light is on";
                                shell_exec("/usr/local/bin/gpio -g write 17 1");
                        }

?>

但用Checkbox/Slider时，PHP完全不工作，代码如下：

<div class="column">
    <div class="main-switch">
        <h1>Main Terminal</h1>
        <form action="index.php" method="post">
            <label class="switch">
                <input type="checkbox" name="checkbox_name" id="switch1" value="OFF" onclick=lights()></input>
                <span class="slider"></span>
            </label>
        </form>

        <?php

        shell_exec("/usr/local/bin/gpio -g mode 17 out");
        if(isset($_POST['checkbox_name'])&& $_POST['checkbox_name']=='OFF')
        {
        echo "Light is off";
        shell_exec("/usr/local/bin/gpio -g write 17 0");
        }
        else
        {
        echo "Light is on";
        shell_exec("/usr/local/bin/gpio -g write 17 1");
        }
        ?>

不管复选框值怎么变，PHP总是执行else分支。我写的onclick函数能根据复选框状态修改值为ON或OFF，控制台打印显示值确实在变。试过改成POST请求、用AJAX都没用，求指导。附JavaScript代码：

function lights(){
var toggle = document.getElementById('switch1');
if(toggle.checked){
toggle.value="ON";
console.log(toggle.value);
  }else{
toggle.value="OFF";
console.log(toggle.value);
 }
}

问题原因及解决办法 #

核心问题 #

1. 表单未提交：按钮版本的submit按钮点击后会自动提交表单，把数据传给PHP；而复选框仅通过onclick修改了值，没有触发表单提交，PHP根本收不到任何POST数据，自然走else分支。
2. 复选框的默认行为：HTML复选框只有在勾选状态时，才会将name和value参数发送给服务器；未勾选时，$_POST['checkbox_name']不存在，直接触发else逻辑。

修复方案一：修改JS触发表单提交 #

在修改复选框值后，主动提交所在表单，让PHP能收到参数：

function lights(){
    var toggle = document.getElementById('switch1');
    var form = toggle.closest('form');
    if(toggle.checked){
        toggle.value="ON";
        console.log(toggle.value);
    }else{
        toggle.value="OFF";
        console.log(toggle.value);
    }
    form.submit(); // 提交表单
}

同时调整PHP逻辑，适配复选框的参数传递规则：

<?php
shell_exec("/usr/local/bin/gpio -g mode 17 out");
// 勾选时收到ON，未勾选时无参数，走else关闭灯光
if(isset($_POST['checkbox_name']) && $_POST['checkbox_name'] == 'ON'){
    echo "Light is on";
    shell_exec("/usr/local/bin/gpio -g write 17 1");
}else{
    echo "Light is off";
    shell_exec("/usr/local/bin/gpio -g write 17 0");
}
?>

修复方案二：用隐藏字段兼容未勾选状态 #

无需JS，给表单添加隐藏字段，确保不管复选框是否勾选，PHP都能收到状态值：

<form action="index.php" method="post">
    <!-- 隐藏字段，默认传递OFF -->
    <input type="hidden" name="checkbox_name" value="OFF">
    <label class="switch">
        <!-- 勾选时传递ON，覆盖隐藏字段的值 -->
        <input type="checkbox" name="checkbox_name" id="switch1" value="ON" onchange="this.form.submit()">
        <span class="slider"></span>
    </label>
</form>

PHP逻辑和方案一保持一致即可，onchange事件会在复选框状态变化时自动提交表单。

额外注意：权限问题 #

确保Apache运行用户（默认是www-data）有权限执行gpio命令，执行以下命令添加权限：

sudo usermod -a -G gpio www-data

修改后重启Apache生效：

sudo systemctl restart apache2

内容的提问来源于stack exchange，提问作者Greg De Sousa