最受欢迎

如何仅在选中我的复选框后设置我的值

How to set my value only after checking my checkbox?

本文关键字：我的 复选框 设置 何仅 | 更新日期: 2023-09-27

我创建了一个带有动态创建的字段的表单。 我有一个带有唯一ID的复选框。 当用户选中该复选框时，只有这两个字段可见（"名称和年龄"）。 如果用户取消选中选择框，则这些字段将隐藏。 这是代码 

 <style>
      .selectContainer{
       display:none;
        }
      input[type=checkbox]:checked ~ .selectContainer {
        display:block;
        }

</style>

HTML代码是：

                  <label for="name">Any Accompanying Person ?:</label>
            <input  type="checkbox" name="person" id="person" >Yes

            <div class="selectContainer">
            <br>

            <label>Person Details</label>
            <p>

             <div style="padding-left:70px;"> 
            <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
            <input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
            </div>
            </p>
            <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
            <tbody>
            <tr>
            <p>
            <td><input type="checkbox" name="chk[]" checked="checked" /></td>
            <td>
            <label>Name</label>
            <input type="text" size="20" name="name[]" id="name"   >
            </td>
            <td>
            <label>Age</label>
            <input type="text" size="20" name="age[]" id="age"  >
            </td>
            </p>
            </tr>
            </tbody>
            </table>
            <div class="clear"></div>
            </fieldset>
            </div>
                          <h3>Choose Your Payment Option</h3>
        <h1>
        <div style="padding-left:150px;">
        <input type="radio" name="type" value="visa" required value="1" >VISA/MASTER CARD:<br />
        <input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
        <input type="radio" name="type" value="neft">NEFT<br /><br/>
        </div>
        <label></label>
        <input type="submit" name="submit" id="submit" value="submit"><br />

php代码是：

  if(isset($_POST['submit'])){

    $name = $_POST['name'];
    $age = $_POST['age'];
    $intIncrement = 0;
    for($l=0; $l < count($name); $l++)
    {
    if ($age[$l]>=12)
    {
    $intIncrement++;
    }

    $user_name="name";
    $user_id=123;

    $qry="INSERT INTO Accomp_Person (name,age,ref_id, ref_name)
    VALUES ('$name[$l]','$age[$l]', '$user_id','$user_name')";

问题： 我正在存储陪同人员的姓名和年龄.如果用户选中复选框并添加姓名和年龄，那么它已成功存储在数据库中，但问题是当用户来时只需检查，然后在取消选中复选框后（任何陪同人员？如何避免这种情况.我想仅存储这些值复选框（陪同人员？请帮助我.

请使用此代码

if(isset($_POST['submit'])){

$name = $_POST['name'];
$age = $_POST['age'];
$checkBox = $_POST['chk'];
$intIncrement = 0;
for($l=0; $l < count($name); $l++)
{
if ($age[$l]>=12)
{
$intIncrement++;
}
$user_name="name";
$user_id=123;
if(isset($checkBox[$l])){
$qry="INSERT INTO Accomp_Person (name,age,ref_id, ref_name)
VALUES ('$name[$l]','$age[$l]', '$user_id','$user_name')";
}
}

在存储 $name 的值和$age到数据库之前，请检查它们是否具有有效的非空值。

您可以通过以下方式检查空值 - 

if (!isset($name) || empty($name)) {
  // $name is either NULL or empty.
  // display error message
}

在数据库中设置名称和年龄的默认值。选中是否选中复选框。如果未选中复选框，则禁用年龄和姓名。表单不会发布禁用输入。所以它不会用空保存

试试这个。

    if (empty($_POST['name'])) {
          $firstNameErr = "Name is required";
          $valid = false; //false
       }
       else {
          $name= test_input($_POST["name"]);
       }
       if (empty($_POST['age'])) {
          $ageErr= "Age is required";
          $valid = false;
       }
       else {
          $age= test_input($_POST["age"]);
       }
 if($valid){
  // do the insert here
  }
如果你想让

Javascript扮演一些角色，你应该做的第一件事是在点击复选框时放一个回调。此后，您可以检查姓名和年龄数据是否存在。如果两个值都存在，则仅调用 addRow（）。这是简单的原型 

<input type='checkbox' id='chk' onclick='check();'/>
<input type='text' id='name' />
<input type='text' id='age' '/>

和JavaScript片段为：

function check(){
if(document.getElementById('chk').checked){
    var name= document.getElementById('name').value;
    var age=document.getElementById('age').value;
    if(name && age){
        //Only when both name and age, then addRow function call
    }
}
}

希望你能从这里拿走它！

虽然您仍然需要验证服务器端，但在 PHP 中，此方法在前端运行以禁用复选框同一行中的每个<input>元素。禁用的元素不被视为"成功"，因此不会提交到服务器：

成功的控件对于提交是"有效的"。每个成功的控件都有其控件名称与其当前值配对，作为提交的表单数据集的一部分。成功的控件必须在 FORM 元素中定义，并且必须具有控件名称。

然而：

  • 禁用的控件无法成功。

"成功的控制"，W3.org 于2015年1月19日13：21（GMT）访问。 

function toggleRowInputs() {
  // caching a reference to the changed checkbox element:
  var checkbox = this,
      // the starting point for the (following) while loop:
    row = checkbox;
  
  // while the tagName of the 'row' variable is neither 'tr' nor 'body':
  while (row.tagName.toLowerCase() !== 'tr' && row.tagName.toLowerCase() !== 'body') {
    // row is changed to the current node's parentNode and we run again:
    row = row.parentNode;
  }
  // if the checkbox was found inside of a <tr> element:
  if (row.tagName.toLowerCase() === 'tr') {
    // we find all the <input> elements of that row, and use filter()
    // to keep only those elements that are not of type="checkbox":
    var inputs = Array.prototype.filter.call(row.querySelectorAll('input'), function(input) {
      if (input.type !== 'checkbox') {
        return input;
      }
    });
    
    // iterating over those found inputs:
    inputs.forEach(function(input) {
      // if the checkbox is checked we enable (disabled = false) the input,
      // otherwise if it's unchecked we disable (disabled = true) the input:
      input.disabled = !checkbox.checked;
    });
  }
}
// using Array.prototype.forEach() to iterate over the array-like NodeList
// returned by document.querySelectorAll() (which uses CSS syntax to find
// the <input> elements of type="checkbox":
Array.prototype.forEach.call(document.querySelectorAll('input[type=checkbox]'), function(checkbox) {
  // adding an event-listener for the 'change' event to each of those
  // <input> elements, which executes the named function:
  checkbox.addEventListener('change', toggleRowInputs);
});
input[disabled] {
  opacity: 0.5;
}
<table style="padding-left:50px;" id="dataTable" class="form" border="1">
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="chk[]" checked="checked" />
      </td>
      <td>
        <label>Name</label>
        <input type="text" size="20" name="name[]" id="name" />
      </td>
      <td>
        <label>Age</label>
        <input type="text" size="20" name="age[]" id="age" />
      </td>
    </tr>
  </tbody>
</table>

请注意，我稍微更改了您的 HTML，删除了最初围绕某些 <td> 元素的不必要的 <p> 标签，因为 <tr> 元素的唯一有效子元素是 <td> 或 <th> ，如果你想要一个段落，那么它必须进入这些元素中的任何一个。

引用：

  • .HTML：
    • HTML 文档中的表单。
    • "成功控制。"
  • JavaScript：
    • Array.prototype.filter() .
    • Array.prototype.forEach() .
    • EventTarget.addEventListener() .
    • Function.prototype.call() .
    • String.prototype.toLowerCase() .
    • while (...) {...}循环。
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习