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按钮后，我将数据插入DB：

//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

希望这将有助于切换。

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

Answer 3

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

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

如果您乐意采用简单的html解决方案，则只需在复选框行之前添加<input type="hidden" name="active" value=1>，然后将value=2添加到复选框输入即可。

神奇之处在于共享的name属性。隐藏的输入字段将用作默认设置，当滑块设置为OFF时将默认设置为POST（如果设置为OFF，则复选框将不会发布值）。复选框滑块设置为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);

打开的输出：

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

OFF的输出：

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

使用开关元素更新数据库值

3 个答案: