Question

有一个红色按钮，按钮下方有一些输入字段。填写输入字段时。按钮颜色应变为绿色。在此下方是第二个红色按钮。在第二个红色按钮下方是两个小红色按钮。红色小按钮下方是两个输入字段。输入字段填满后，红色的小按钮应变为绿色。并且当两个小按钮均为绿色时，则大按钮也应变为绿色。

试图创建一个Java脚本来检查输入字段是否已填充

<!DOCTYPE html>
<html>
<head>
 <title>Checklist uHTS Webversion</title>
<style>
table, th, td {
    border: 1px solid black;
}
button {
  height:40px;
  width:160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button1 { background: red }

.button1:hover {
  background-color: green;
}
.buttonsmall{
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:white;
}
.buttonsmall:hover {
  background-color: green;
}
</style>
</head>
 <body onload="beginfase()" style="background-color:#E3CEF6;" >
  <p><br><br></p>

<button id = "button" onclick="showOrHide('General')" class="button1" name= "bGeneral" ><b>General</b></button> 

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
      <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
   <tr>
    <td width="10%">      
    </td>
    <td width="20%">Protocol name(s) : </td>
    <td width="30%"><input type="text" id="Protname" name="Protocol name(s)" size="35"> </td>
    <td width="20%"></td>
    <td width="20%"></td>
   </tr>
   <tr>
    <td>      
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr>
    </table>
 </div>
<!-- Create extra space -->
<p><br></p> 

<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "buttonP" ><b>Plates</b></button> 
<!-- Insert a table in a div, so this can be hide -->
 <div id="Plates">
<br>    
<div id="CompoundPlates_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="20%"><input type="button" id = "buttonCP"  name="buttonCP" class="buttonsmall" style="height:20px;width:60px" >      
    </td>
    <td width="40%"><b>CompoundPlates</></td>
    <td width="15%"></td> 
    <td width="15%"></td>
    <td width="10%"></td>   
  </tr> 
  </table>
 </div> <!-- Close Div CompoundPlates_button --> 
         <!-- Insert a table in a div, so this can be hide -->
 <div id="CompoundPlates">
   <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
   <tr>
    <td  width="10%">      
    </td>
    <td  width="20%">Number of Plates:</td>
    <td  width="30%"><input type="text" name="Number of plates" size="35"></td> 
    <td  width="20%"></td>
    <td  width="20%"></td>  
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr>
   </table>
 </div> <!-- Close div CompoundPlates -->
<div id="AssayPlates_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="20%"><input type="button" id = "buttonAP" name="buttonAP" class="buttonsmall" style="height:20px;width:60px" >      
    </td>
    <td width="40%"><b>AssayPlates</></td>
    <td width="15%"></td> 
    <td width="15%"></td>
    <td width="10%"></td>   
  </tr> 
    </table>
  </div> <!-- Close Div AssayPlates_button -->   
<div id="AssayPlates">
     <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
    <tr>
    <td width="10%">      
    </td>
    <td width="20%">Number of Plates:</td>
    <td width="30%"><input type="text" name="Number of platesAP" size="35"></td> 
    <td width="20%"></td>
    <td width="20%"></td>   
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr>
  </table>
  </div> <!-- Close div AssayPlates -->
  </div> <!-- Close div Plates -->
<!-- Create extra space -->
<p><br></p> 

<script type="text/javascript">

function allInputsHaveValue (genInputs) {
    for (var i = 0; i < genInputs.length; i++) {
        if (genInputs[i].value.trim() == '') return false;
    }
    return true;
}
var genInputs = document.querySelectorAll('#General input[type="text"]');
for (var i = 0; i < genInputs.length; i++) {
    genInputs[i].addEventListener("keyup", function(e) {
        var color = (allInputsHaveValue(genInputs) == true) ? "green" : "red";
        var btn = document.getElementById('button');
        btn.classList.remove("green", "red");
        btn.classList.add(color);
    });
}
</script>
  </body>
</html>

填充输入字段时，请期待按钮颜色的变化

Answer 1

您可以应用它。使用此方法，您可以看到填充输入字段时如何更改按钮的颜色。如果字段已填写，请使用 #idForm：valid .button 作为按钮

        .wrapper {
        display: flex;
        flex-flow: row wrap;
        text-align: center;
        background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
         font-family: Arial;
     }

     #idForm:valid .button {
      background : yellow;
     }

    <div class="wrapper">
        <main class="main">
            <h2>Form</h2>
            <form id="idForm" method="GET" action="action.html">
                <label for="uName"><b>uName:</b></label>
                <input id="uName" type="text" placeholder="uName" required/><br/>
                <label for="pswrd"><b>pswrd:</b></label>
                <input id="pswrd" type="pswrd" placeholder="pswrd" required/><br/>
                <input class="button" type="submit" value="Form"/><br/>
            </form>
        </main>
       </div>

Answer 2

我使用其他CSS / JavaScript更新了您的代码

<!DOCTYPE html>
<html>

<head>
    <title>Checklist uHTS Webversion</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        button {
            height: 40px;
            width: 160px;
            border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color: red;
            color: yellow;
            padding: 12px 15px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
        /* ADDED CSS */
        button.green,
        input.green {
            background: green;
        }
        /* ADDED CSS -- end*/

        .button1 {
            background: red
        }

        .button1:hover {
            background-color: green;
        }

        .buttonsmall {
            background-color: #FF0000;
            border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color: white;
        }

        .buttonsmall:hover {
            background-color: green;
        }
    </style>
</head>

<body onload="beginfase()" style="background-color:#E3CEF6;">
    <p><br><br></p>

    <button id="button" onclick="showOrHide('General')" class="button1" name="bGeneral"><b>General</b></button>

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
        <table style="width:50%;margin-left:50px;">
            <colgroup>
                <col span="3" style="background-color:#E3CEF6;">
            </colgroup>
            <tr>
                <td width="10%">
                </td>
                <td width="20%">Protocol name(s) : </td>
                <td width="30%"><input type="text" id="Protname" name="Protocol name(s)" size="35"> </td>
                <td width="20%"></td>
                <td width="20%"></td>
            </tr>
            <tr>
                <td>
                </td>
                <td>Order name(s):</td>
                <td><input type="text" name="Order name(s)" size="35"></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <!-- Create extra space -->
    <p><br></p>

    <!-- The Next Button Plates -->
    <button id="buttonP" onclick="showOrHide('Plates')" class="button1" name="buttonP"><b>Plates</b></button>
    <!-- Insert a table in a div, so this can be hide -->
    <div id="Plates">
        <br>
        <div id="CompoundPlates_button">
            <table style="width:20%;margin-left:50px;">
                <colgroup>
                    <col span="3" style="background-color:#E3CEF6;">
                    <!--<col style="background-color:yellow"> -->
                </colgroup>
                <tr>
                    <td width="20%"><input type="button" id="buttonCP" name="buttonCP" class="buttonsmall"
                            style="height:20px;width:60px">
                    </td>
                    <td width="40%"><b>CompoundPlates</>
                    </td>
                    <td width="15%"></td>
                    <td width="15%"></td>
                    <td width="10%"></td>
                </tr>
            </table>
        </div> <!-- Close Div CompoundPlates_button -->
        <!-- Insert a table in a div, so this can be hide -->
        <div id="CompoundPlates">
            <table style="width:50%;margin-left:50px;">
                <colgroup>
                    <col span="3" style="background-color:#E3CEF6;">
                </colgroup>
                <tr>
                    <td width="10%">
                    </td>
                    <td width="20%">Number of Plates:</td>
                    <td width="30%"><input type="text" name="Number of plates" size="35"></td>
                    <td width="20%"></td>
                    <td width="20%"></td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>Order name(s):</td>
                    <td><input type="text" name="Order name(s)" size="35"></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div> <!-- Close div CompoundPlates -->
        <div id="AssayPlates_button">
            <table style="width:20%;margin-left:50px;">
                <colgroup>
                    <col span="3" style="background-color:#E3CEF6;">
                    <!--<col style="background-color:yellow"> -->
                </colgroup>
                <tr>
                    <td width="20%"><input type="button" id="buttonAP" name="buttonAP" class="buttonsmall"
                            style="height:20px;width:60px">
                    </td>
                    <td width="40%"><b>AssayPlates</>
                    </td>
                    <td width="15%"></td>
                    <td width="15%"></td>
                    <td width="10%"></td>
                </tr>
            </table>
        </div> <!-- Close Div AssayPlates_button -->
        <div id="AssayPlates">
            <table style="width:50%;margin-left:50px;">
                <colgroup>
                    <col span="3" style="background-color:#E3CEF6;">
                </colgroup>
                <tr>
                    <td width="10%">
                    </td>
                    <td width="20%">Number of Plates:</td>
                    <td width="30%"><input type="text" name="Number of platesAP" size="35"></td>
                    <td width="20%"></td>
                    <td width="20%"></td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>Order name(s):</td>
                    <td><input type="text" name="Order name(s)" size="35"></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div> <!-- Close div AssayPlates -->
    </div> <!-- Close div Plates -->
    <!-- Create extra space -->
    <p><br></p>

    <script type="text/javascript">

        function allInputsHaveValue(genInputs) {
            for (var i = 0; i < genInputs.length; i++) {
                if (genInputs[i].value.trim() == '') return false;
            }
            return true;
        }

        var genInputs = document.querySelectorAll('#General input[type="text"]');
        for (var i = 0; i < genInputs.length; i++) {
            genInputs[i].addEventListener("keyup", function (e) {
                var color = (allInputsHaveValue(genInputs) == true) ? "green" : "red";

                var btn = document.getElementById('button');
                btn.classList.remove("green", "red");
                btn.classList.add(color);
            });
        }



        /* ADDED JAVASCRIPT */
        function check_CompoundAndAssyButtons() {
            var btnCP = document.getElementById('buttonCP');
            var btnAP = document.getElementById('buttonAP');

            var color = ((btnCP.classList.contains('green')) && (btnAP.classList.contains('green'))) ? "green" : "red";

            var btn = document.getElementById('buttonP');
            btn.classList.remove("green", "red");
            btn.classList.add(color);
        }

        var CompoundPlatesInputs = document.querySelectorAll('#CompoundPlates input[type="text"]');
        for (var i = 0; i < CompoundPlatesInputs.length; i++) {
            CompoundPlatesInputs[i].addEventListener("keyup", function (e) {
                var color = (allInputsHaveValue(CompoundPlatesInputs) == true) ? "green" : "red";
                var btn = document.getElementById('buttonCP');
                btn.classList.remove("green", "red");
                btn.classList.add(color);

                check_CompoundAndAssyButtons();
            });
        }

        var assyPlatesInput = document.querySelectorAll('#AssayPlates input[type="text"]');
        for (var i = 0; i < assyPlatesInput.length; i++) {
            assyPlatesInput[i].addEventListener("keyup", function (e) {
                var color = (allInputsHaveValue(assyPlatesInput) == true) ? "green" : "red";
                var btn = document.getElementById('buttonAP');
                btn.classList.remove("green", "red");
                btn.classList.add(color);

                check_CompoundAndAssyButtons();
            });
        }
        /* ADDED JAVASCRIPT -- end */
        // JSFIDDLE
        // https://jsfiddle.net/tk6430p7/5/
    </script>
</body>

</html>

Answer 3

您可以使用jQuery通过元素的ID获取元素的值，并检查它们是否为空。另外，将检查放入onkeyup方法调用的方法中，以便每次对任何输入进行更改时都进行检查。在此示例中，当您填写所有字段时，“印版”按钮变为绿色。如果您清空其中一个，它将再次变成红色。

    <!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"> </script>
  <title>Checklist uHTS Webversion</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }

    button {
      height: 40px;
      width: 160px;
      border: 4px;
      border-radius: 20px 20px 20px 20px;
      border-color: red;
      color: yellow;
      padding: 12px 15px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }

    .button1 {
      background: red
    }

    .button1:hover {
      background-color: green;
    }

    .buttonsmall {
      background-color: #FF0000;
      border: 4px;
      border-radius: 20px 20px 20px 20px;
      border-color: white;
    }

    .buttonsmall:hover {
      background-color: green;
    }
  </style>
</head>

<body style="background-color:#E3CEF6;">
  <p><br><br></p>

  <button id="button" onclick="showOrHide('General')" class="button1" name="bGeneral"><b>General</b></button>

  <!-- Insert a table in a div, so this can be hide -->
  <div id="General">
    <table style="width:50%;margin-left:50px;">
      <colgroup>
        <col span="3" style="background-color:#E3CEF6;">
      </colgroup>
      <tr>
        <td width="10%">
        </td>
        <td width="20%">Protocol name(s) : </td>
        <td width="30%"><input type="text" id="Protname" name="Protocol name(s)" size="35" onkeyup="changeColor()">
        </td>
        <td width="20%"></td>
        <td width="20%"></td>
      </tr>
      <tr>
        <td>
        </td>
        <td>Order name(s):</td>
        <td><input type="text" id="Order" name="Order name(s)" size="35" onkeyup="changeColor()"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <!-- Create extra space -->
  <p><br></p>

  <!-- The Next Button Plates -->
  <button id="buttonP" onclick="showOrHide('Plates')" class="button1" name="buttonP"><b>Plates</b></button>
  <!-- Insert a table in a div, so this can be hide -->
  <div id="Plates">
    <br>
    <div id="CompoundPlates_button">
      <table style="width:20%;margin-left:50px;">
        <colgroup>
          <col span="3" style="background-color:#E3CEF6;">
          <!--<col style="background-color:yellow"> -->
        </colgroup>
        <tr>
          <td width="20%"><input type="button" id="buttonCP" name="buttonCP" class="buttonsmall"
              style="height:20px;width:60px">
          </td>
          <td width="40%"><b>CompoundPlates</>
          </td>
          <td width="15%"></td>
          <td width="15%"></td>
          <td width="10%"></td>
        </tr>
      </table>
    </div> <!-- Close Div CompoundPlates_button -->
    <!-- Insert a table in a div, so this can be hide -->
    <div id="CompoundPlates">
      <table style="width:50%;margin-left:50px;">
        <colgroup>
          <col span="3" style="background-color:#E3CEF6;">
        </colgroup>
        <tr>
          <td width="10%">
          </td>
          <td width="20%">Number of Plates:</td>
          <td width="30%"><input type="text" id="Number1" name="Number of plates" size="35" onkeyup="changeColor()">
          </td>
          <td width="20%"></td>
          <td width="20%"></td>
        </tr>
        <tr>
          <td>
          </td>
          <td>Order name(s):</td>
          <td><input type="text" id="Order1" name="Order name(s)" size="35" onkeyup="changeColor()"></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div> <!-- Close div CompoundPlates -->
    <div id="AssayPlates_button">
      <table style="width:20%;margin-left:50px;">
        <colgroup>
          <col span="3" style="background-color:#E3CEF6;">
          <!--<col style="background-color:yellow"> -->
        </colgroup>
        <tr>
          <td width="20%"><input type="button" id="buttonAP" name="buttonAP" class="buttonsmall"
              style="height:20px;width:60px">
          </td>
          <td width="40%"><b>AssayPlates</>
          </td>
          <td width="15%"></td>
          <td width="15%"></td>
          <td width="10%"></td>
        </tr>
      </table>
    </div> <!-- Close Div AssayPlates_button -->
    <div id="AssayPlates">
      <table style="width:50%;margin-left:50px;">
        <colgroup>
          <col span="3" style="background-color:#E3CEF6;">
        </colgroup>
        <tr>
          <td width="10%">
          </td>
          <td width="20%">Number of Plates:</td>
          <td width="30%"><input type="text" id="Number2" name="Number of platesAP" size="35" onkeyup="changeColor()">
          </td>
          <td width="20%"></td>
          <td width="20%"></td>
        </tr>
        <tr>
          <td>
          </td>
          <td>Order name(s):</td>
          <td><input type="text" id="Order2" name="Order name(s)" size="35" onkeyup="changeColor()"></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div> <!-- Close div AssayPlates -->
  </div> <!-- Close div Plates -->
  <!-- Create extra space -->
  <p><br></p>

  <script type="text/javascript">
    function changeColor() {
        var miElemento = $('#Protname').val();
        var miElemento2 = $('#Order').val();
        var miElemento3 = $('#Number1').val();
        var miElemento4 = $('#Order1').val();
        var miElemento5 = $('#Number2').val();
        var miElemento6 = $('#Order2').val();
        if (miElemento !== "" && miElemento2 !== "" && miElemento3 !== "" && miElemento4 !== "" && miElemento5 !==
          "" && miElemento6 !== "") {
          $("#buttonP").css("background-color", "green");
        } else {
          $("#buttonP").css("background-color", "red");
        }
      }
  </script>
</body>

</html>

填写输入字段时更改按钮颜色

3 个答案: