javascript - 如果任何输入字段不为空或不等于 0 javascript

Question

我有股票表。我使用sql statemnet从堆栈表中提取数据，使用while循环显示在网页上。

请看图片。 stock page

我在每行库存旁边都有一个空的输入字段。用户应该通过在空白字段中输入数字来浏览库存和更新库存。所以我希望它的工作方式是用户浏览库存，输入库存编号，然后页面底部有一个按钮，用户必须单击该按钮才能更新库存。

我如何隐藏所有字段的更新按钮 = 0。如果用户输入任何字段，更新按钮应该出现，如果用户更改值，返回 0 它应该再次隐藏。

如果我给输入字段一个类“stock-val”，而不是使用 .change 函数，它会起作用，问题是如果用户编辑 1 个库存元素，然后再编辑另一个，然后返回并将前一个标记为 0，按钮隐藏。我通过选择类来做到这一点，如果我将其标记为 0，.change 将隐藏它。

如果至少有一个字段大于 0，我需要一种方法来显示更新按钮，如果所有字段都为空则隐藏为 0。

谢谢。

我的 Html:

    <div class="table-responsive">          
    <table class="table">
        <tbody>
            <?php
            if(mysqli_num_rows($result_miscellaneous) > 0){
            while($row = mysqli_fetch_array($result_miscellaneous,MYSQLI_ASSOC)){
            ?>
            <tr>
              <td><?php echo $row['description_stk']?></td>
              <td><input class="form-control" type="text" value="<?php echo $row['clipbundleinfo_stk']?>"</td>
              <td><input class="form-control clips-assign-val" type="text" value="0"</td>
             </tr>
            <?php
            } 
        }
       ?> 
         </tbody>
     </table>
 </div>

Javascript:

    <script>
       $(document).ready(function(){
      $(".clips-assign-val").change(function(){
       var val = $(this).val();

        if(val > 0 ){
        $('#clip-bundles-assign-button1').show();
      }else {
     $('#clip-bundles-assign-button2').show();

    }

   });
  });
  </script>

那么如何隐藏更新按钮，如果所有输入字段都是空的，并且只有在至少 1 个字段不为空且大于 0 时才显示。

Answer 1

在每次更改时，您都需要检查是否有非零输入值。此值可以位于发生 change 事件的输入元素之外的任何其他输入元素中，因此您应该检查所有这些元素。您可以使用 each 来做到这一点。这是一个简化的 HTML 来演示它:

$(document).ready(function(){
	$(".clips-assign-val").change(function(){
		var allZero = true;
		$(".clips-assign-val").each(function () {
			var val = +$(this).val(); // convert string to number
			allZero = allZero && val === 0;
			return allZero; // if false, the loop will be aborted
		});
		$('#clip-bundles-assign-button1').toggle(!allZero);
		$('#clip-bundles-assign-button2').toggle(allZero);
   }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="clips-assign-val" value=0><br>
<input class="clips-assign-val" value=0><br>
<button id="clip-bundles-assign-button1">Not All Zero</button><br>
<button id="clip-bundles-assign-button2">All Zero</button>

注意:如果您只想输入数字，您可以考虑输入 type="number" 而不是 type="text"。