使用开关元素更新 DB 值

Question

我有一个 html 开关可以在 on 和 off 之间切换：

<label class="switch">
    <input type="checkbox" id="togBtn" name="active" checked="checked">
    <div class="slider round">
        <span class="on">ON</span>
        <span class="off">OFF</span>
    </div>
</label>

您可以在此处实时查看：http://jsfiddle.net/tc4byzo8

默认选中on并且在表单中：

<form method="post">
    ..
    <input type="submit" name="submit" value="Submit" >
<form>

点击Submit按钮时，我将数据插入数据库：

//Check if submit button is clicked.
if( isset($_POST['submit']) ){

     //Insert the data into the DB.
    $stmt = $conn->prepare( /* Insert query */ );
    $stmt->execute();

}

数据库有一列的值可能是1 或0，因此如果选中该复选框，则值将是1。

如何检查复选框是否被选中以插入值1或2？

我添加了checked="checked"属性，所以默认勾选，但是当我关闭它时，checked属性仍然存在。

Answer 1

您可以检查值并在 if 条件下分配它。您的代码将如下所示。

if( isset($_POST['submit']) ){
  if(isset($_POST['active'])){
    $_POST['active'] = 1;
  }else{
    $_POST['active'] = 0;
  }
  //Insert the data into the DB.
  $stmt = $conn->prepare( /* Insert query */ );
  $stmt->execute();
}

如果您遇到任何问题。告诉我

Answer 2

您可以像 Anshul 演示的那样使用 php 有条件地声明 POSTed 数据。

您可以在发布之前使用 jquery 修改表单，就像 Prakash Pandey 演示的那样。

如果您乐于使用简单的 html 解决方案，那么您只需在复选框行之前添加 <input type="hidden" name="active" value=1> 并将 value=2 添加到您的复选框输入中。

神奇之处在于共享的name 属性。隐藏的输入字段将作为默认设置，当滑块设置为关闭时将发布（如果设置为关闭，复选框将不会发布值）。当复选框滑块设置为 ON 时，隐藏字段的值将被覆盖。

*注意，我将您的问题要求解释为您希望 1 代表 OFF 和 2 代表 ON。

这是我测试我的解决方案的完整表格：

<form method="post">
 <label class="switch">
  <input type="hidden" name="active" value=1>
  <input type="checkbox" id="togBtn" name="active" checked="checked" value=2>
  <div class="slider round">
    <span class="on">ON</span>
    <span class="off">OFF</span>
  </div>
</label>
<input type="submit" name="submit" value="Submit" >
<form>

<?php
var_export($_POST);

ON 输出：

array ( 'active' => '2', 'submit' => 'Submit', )

关闭输出：

array ( 'active' => '1', 'submit' => 'Submit', )

Answer 3

希望这有助于切换。

$('input[type="checkbox"]').click(function(){ 
     if($(this).prop("checked")){ 
         $(this).val(1); 
      }else{ 
         $(this).val(0); 
     }
});