复选框使输入不可见

Question

我在 php 中有一个查询，它从表中收集产品并按下它们，我希望通过单击复选框使输入可见，直到现在我都有这个：

<?php
$conn->conectar();
$query = "SELECT * FROM c_ingredientes WHERE precio = '5'";
try {
    $resp = $conn->obtDatos($query);
    if ($conn->filasConsultadas > 0) {
        foreach ($resp as $dts) {
            $id = $dts['id'];
            $ingrediente = $dts['ingrediente'];

            echo "<style>
                #quiantitynice{ 
                    display: none;
                }
                </style>
                <div name=\"quiantitynice$id\">
                    <input type=\"number\" name=\"quantity$id\">
                </div>";

            echo "<div class=\"form-check\">
                    <input class=\"form-check-input\" name=\"extra\" type=\"checkbox\" id=\"extra$id\" value=\"$id\">
                    <label class=\"form-check-label\" for=\"extra$id\">" . utf8_encode($ingrediente) . "</label>
                </div>";
        }
    }
}
catch (Exception $ex) {
    echo $ex;
}
$conn->cerrar();
?>

这是我在脚本中的内容，但我不知道如何连接它，因为每个复选框都有其名称 + PHP id，并且它们已经生成：

 <script>
        $(document).ready(function() {
            $('#extra').on('change', function() {
                if (this.checked) {
                    $("#quantity$id").show();
                } else {
                    $("#quantity&id").hide();
                }
            })
        });
 </script>

Answer 1

您可以通过这些步骤来实现；

1. 首先获取您点击的复选框的值。
2. 并检查复选框是否被选中。
3. 如果选中，则显示与您单击的复选框相关的输入，方法是将输入的 id 字符串 与您从复选框中获得的 值 连接起来。

$(document).ready(function(){
  $('[name="extra"]').on('change',function () { 
    var _thisVal = $(this).val();
    
    if (this.checked) {
      $("#quiantitynice" + _thisVal).show();
    } else {
      $("#quiantitynice" + _thisVal).hide();
    }

  });

});

.quiantitynice { 
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-check">
  <input class="form-check-input" name="extra" type="checkbox" id="extra1" value="1">
  <label class="form-check-label" for="extra1">ingredientname1</label>
</div>

<div class="quiantitynice" id="quiantitynice1">
  <input type="number" name="quantity1">
</div>

<div class="form-check">
  <input class="form-check-input" name="extra" type="checkbox" id="extra$id" value="2">
  <label class="form-check-label" for="extra1">ingredientname2</label>
</div>

<div class="quiantitynice" id="quiantitynice2">
  <input type="number" name="quantity2">
</div>