使用 innerHTML 根据复选框更改 div 值

Question

我正在尝试根据复选框是否被选中来更改 div 中的文本。我是 Javascript 的新手，所以这就是我尝试过的...如果有人能指出我离开 rails 的地方，我将不胜感激。

function SetContent() {
  if (document.complianceformAA.compliance_AA.checked == true) {
    document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
  } else {
    document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
  }
}

<div id="Concerns">
  <form id="complianceformAA">
    <input type="checkbox" id="compliance_AA">
    <label for="compliance_AA">Compliance Concern?</label>
  </form>
</div>
<button onclick="SetContent ();">Generate Summary</button>
<div id="ComplianceSummary"></div>

Answer 1

你不应该使用 named elements, instead select by the id using Document.getElementById()

function SetContent() {
  if (document.getElementById('compliance_AA').checked) {
    document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
  } else {
    document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
  }
}

<div id="Concerns">
  <form id="complianceformAA">
    <input type="checkbox" id="compliance_AA">
    <label for="compliance_AA">Compliance Concern?</label>
  </form>
</div>
<button onclick="SetContent ();">Generate Summary</button>
<div id="ComplianceSummary"></div>

Answer 2

首先，缩进您的代码：

function setContent() {
  if (document.complianceformAA.compliance_AA.checked == true) {
    document.getElementById('ComplianceSummary').innerHTML="A compliance concern is found for Key Element I-A.";
  } else {
   document.getElementById('ComplianceSummary').innerHTML="Key Element I-A is met.";
  }
}

其次，你不会得到这样的元素。您可以通过以下方法之一获得它：

getElementById('id')

这是根据ID获取元素。例如，这个：

document.getElementById('checkbox');

会得到这个：

<input type="checkbox" id="checkbox"></input>

getElementsByTagName();

这会获取所有具有相同标签的元素。

document.getElementsByTagName('button');

可以return

HTMLCollection [ <button>, <button>, <button>, <button> ]

使用此 HTML 代码：

<div id="buttons">
  <button>
  <button>
  <button>
  <button>
</div>

getElementsByClassName()

此 return 具有特定 class 名称的所有元素。例如：

document.getElementsByClassName('a')

可以return

HTMLCollection [ <button.a>, <button.a>, <button.a>, <button.a> ]

使用此代码

<div id="buttons">
  <button class="a">
  <button class="a">
  <button class="a">
  <button class="a">
</div>

getElementsByName()

这将获取具有指定名称的所有元素。例如：

document.getElementsByName('hi');

可以return

NodeList [ <button.className> <button.className> ]

使用此 HTML 代码：

<div id="buttons">
<button name="hi" class="className">
<button name="hi" class="className">
</div>

所以你想要的 javascript 是这样的：

function setContent() {
  checkBox = document.getElementById('compliance_AA');
  if (checkBox.checked) {
    document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
  } else {
    document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
  }
}

这是一个例子：

    function setContent() {
      checkBox = document.getElementById('compliance_AA');
      if (checkBox.checked) {
        document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
      } else {
        document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
      }
    }

<div id="Concerns">
  <form id="complianceformAA">
    <input type="checkbox" id="compliance_AA">
    <label for="compliance_AA">Compliance Concern?</label>
  </form>
</div>
<button onclick="setContent();">Generate Summary</button>
<div id="ComplianceSummary"></div>

Answer 3

function SetContent(){
   var chk = document.getElementById("compliance_AA");
   var summary = document.getElementById("ComplianceSummary");

   if(chk.checked){
    summary.innerHTML="A compliance concern is found for Key Element I-A."
   }else{
    summary.innerHTML="Key Element I-A is met."
   }
}

使用 innerHTML 根据复选框更改 div 值

Using innerHTML to change div value based on checkbox

javascript

forms

innerhtml