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

时间：2018-07-10 10:18:16

标签： javascript html

如果两个复选框都被选中，我尝试更改按钮的颜色。但是我不知道该怎么做。我了解我需要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>

5 个答案:

答案 0 :(得分：0)

您需要为复选框输入设置属性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>

答案 1 :(得分：0)

将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>

答案 2 :(得分：0)

您说对了，Postgres是正确的，但是如果您不致电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，则{1}}将更改。然后，使用backgroundColor函数将checkboxes are checked添加到eventListener中。在其中，它检查是否使用check1属性检查了两个（addEventListener）&&。如果两者均为checkboxes，则会更改给定checked的{​​{1}}。

参考和进一步阅读

Article about the addEventListener function

答案 3 :(得分：0)

尝试一下

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>

答案 4 :(得分：0)

也许这会帮助您有一个想法。这只是带有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>

相关问题
最新问题