Question

这是我的脚本：

这是我正在尝试将其链接到的 html / php 。

当复选框被打勾时，我需要将文本的颜色更改为黑色，否则将其更改为红色。我不确定我要去哪里哪里，我们会提供任何帮助。

Answer 1

var chk = document.querySelector('input[name="termsChkbx"]');

Answer 2

以下代码段对我有用。您没有通过正确的id来选择您的内容。

"use strict";

var chk = document.querySelector('#termsChkbx');

document.getElementById("termsChkbx").onclick = function() {textCol()};

function textCol() 
{
    if(chk.checked){
         document.getElementById("termsText").style.color = "black";
    }else document.getElementById("termsText").style.color = "red";

}

<p style="color: #FF0000; font-weight: bold;" id="termsText">I agree to the terms and conditions
        <input type="checkbox" name="termsChkbx" id="termsChkbx"></p>

Answer 3

您可以改用document.getElementsByName。

"use strict";

var chk = document.getElementsByName('termsChkbx')[0];

document.getElementsByName('termsChkbx')[0].onclick = function() {
  textCol()
};

function textCol() {
  if (chk.checked) {
    document.getElementById("termsText").style.color = "black";
  } else {
    document.getElementById("termsText").style.color = "red";
  }
}

<p style="color: #FF0000; font-weight: bold;" id="termsText">I agree to the terms and conditions
  <input type="checkbox" name="termsChkbx"></p>

Answer 4

使用querySelector("#termsText input")确保目标是输入。

"use strict";

var chk = document.querySelector("#termsText input");

chk.onclick = function() {
  textCol()
};

function textCol() {
  var paragraph = document.getElementById("termsText");
  if (chk.checked) {
    paragraph.style.color = "black";
  } else {
    paragraph.style.color = "red";
  }
}

Answer 5

考虑简化您的代码：

document.querySelector('.trmsChkbx').onclick = function() {
    document.querySelector(".trmsTxt").style.color = this.checked ? "#000" : "#f00";
}

.trmsTxt{
    color: #f00; 
    font-weight: 700;
}

<label class="trmsTxt" id="trmsTxt">
  I agree to the terms and conditions
  <input type="checkbox" name="trmsChkbx" class="trmsChkbx">
</label>

JavaScript-选中复选框时文本不会改变颜色

5 个答案: