如果选中复选框，则html更改颜色按钮答案

【问题标题】：html change color button if checkboxes are checked如果选中复选框，则html更改颜色按钮
【发布时间】：2018-07-10 18:48:31
【问题描述】：

如果选中了两个复选框，我会尝试更改按钮的颜色。但我无法弄清楚如何做到这一点。我知道我需要 javascript，但完全没有使用 javascript 的经验。我从互联网上复制了一些行，但这不会改变按钮的颜色。因此，如果选中复选框，则应该为按钮选择另一种样式。

这是我目前的代码：

<!DOCTYPE html>
<html>

<head>
    <style>
        .button1 {
            background-color: #FF0000;
            border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color: red;
            color: yellow;
            padding: 15px 25px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }

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

        .button2 {
            background-color: #FF00FF;
        }
    </style>

    <script type="text/javascript">
        function checkbox_checked {
            if (input.getAttribute('type') == 'checkbox' && input.checked)
                n++;
            checkbox_checked.elements.boxes_checked.value = n;

            if n = 2 button.className = "button2";
        }
    </script>
</head>

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

    <button class="button1">General</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;">
                <col style="background-color:yellow">
            </colgroup>
            <tr>
                <td><label class="container"> <input type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
                <td>Protocol name(s) : </td>
                <td><input type="text" name="Protocol name(s)" size="35"> </td>
            </tr>
            <tr>
                <td><label class="container"> <input type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
                <td>Order name(s):</td>
                <td><input type="text" name="Order name(s)" size="35"></td>
            </tr>
        </table>
    </div>

</body>

</html>

【问题讨论】：

函数在你调用它们之前不会做任何事情。你最好先添加事件监听器
之前在 stackoverflow 上已回答：stackoverflow.com/questions/31705665/…

标签： javascript html

【解决方案1】：

将onchange() 附加到复选框。然后只需选中两个复选框以相应地更改类。请尝试以下操作：

function checkbox_checked(){
  var chk = document.querySelectorAll('input[name^=cb_General_]')
  if(chk[0].checked && chk[1].checked)
    button.className = "button2";
  else button.className = "button1";
}

.button1 {
    background-color: #FF0000;
    border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color:red;
    color: yellow;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button1:hover {
    background-color: green;
}
.button2 {
    background-color: #FF00FF;
}

<!DOCTYPE html>
<html>
<head>

</head>

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

    <button id = "button" class="button1" >General</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;">
        <col style="background-color:yellow">
        </colgroup>
        <tr>
          <td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
          <td>Protocol name(s) : </td>
          <td><input type="text" name="Protocol name(s)" size="35"> </td>
        </tr>
        <tr>
          <td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
          <td>Order name(s):</td>
          <td><input type="text" name="Order name(s)" size="35"></td>    
        </tr> 
      </table>
    </div>

  </body>
</html>

【讨论】：

非常感谢您的帮助和解释。这就是我试图做的
@Orca，不客气......如果答案解决了您的问题，那么您可以通过单击答案旁边的复选标记来接受答案，将其从灰色切换为已填充。 .....谢谢。

【解决方案2】：

您需要为复选框输入设置属性onchange，并且您的javascript代码中也存在一些错误。你可以得到这样的结果：

.button1 {
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button1:hover {
  background-color: green;
}
.button2 {
  background-color: #FF00FF;
}

<script>
var n = 0;
function checkbox_checked(e) {
	if(e.checked) {
  	n++;
  }
  else {
  	n--;
  }
  
  document.getElementsByTagName("button")[0].className = (n == 2) ? "button2" : "button1";
}
</script>
<button class="button1" >General</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;">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Protocol name(s) : </td>
    <td><input type="text" name="Protocol name(s)" size="35"> </td>
   </tr>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td>    
  </tr> 
</table>
</div>

【讨论】：

非常感谢您的帮助和解释。这就是我试图做的

【解决方案3】：

您是对的，您需要JavaScript，但如果您不调用function，它将无济于事。但是，有一种更好的方法，称为eventListener。这总是“监听”您的代码并在出现 changes 时触发。

事件监听器示例

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <input type="checkbox" id="check1">
    <input type="checkbox" id="check2">
    <button id="button">Watch me change</button>
</div>
</body>
</html>
<script>
    document.getElementById("check1").addEventListener("change", function(){
        if(document.getElementById("check1").checked && document.getElementById("check2").checked){
            document.getElementById("button").style.backgroundColor = "red";
        }
    });
</script>

说明

在HTML body 部分中，有两个checkboxes，它们都有一个唯一的ID（check1 和check2）和一个button，如果这两个checkboxes are checked，其backgroundColor 将发生变化。然后使用addEventListener 函数将eventListener 添加到check1。在其中，它检查 (&&) checkboxes 是否都使用 checked 属性进行了检查。如果两者都是true，它会更改给定button 的backgroundColor。

参考与延伸阅读

Article about the addEventListener function

【讨论】：

非常感谢您的帮助和逐步解释。这就是我试图做的。现在我看到有几种解决方案

【解决方案4】：

试试这个

var i = 0;
function checkbox_checked(e) {
	if(e.checked) {
  	i++;
    
  }
  else {
  	i--;
  }
  
   document.getElementsByTagName("button")[0].className = (i == 2) ? "button2" : "button1";
}

button {
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button1{
background-color: #FF0000;
}

.button1:hover {
  background-color: green;
}
.button2 {
  background-color: #FF00FF;
}

<button class="button-css button1" >General</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;">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Protocol name(s) : </td>
    <td><input type="text" name="Protocol name(s)" size="35"> </td>
   </tr>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td>    
  </tr> 
</table>
</div>

【讨论】：

非常感谢您的帮助和解释。这就是我试图做的。

【解决方案5】：

也许这个可以帮助你产生一个想法。这只是一个简单的 html 和 javascript 代码。

function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var button = document.getElementById("myButton");
    
    if (checkBox.checked == true){
        button.style.backgroundColor = "green";
    } else {
       button.style.backgroundColor = "red";
    }
}

<input id="myCheck" type="checkbox" onclick="myFunction()">Click Me<br>

<button id="myButton" style="background-color: red; color: white">Button</button>

【讨论】：