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

Posted 2023-05-07

【中文标题】使用innerHTML根据复选框更改div值

【英文标题】：Using innerHTML to change div value based on checkbox

【发布时间】：2015-11-08 08:21:10

【问题描述】：

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

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>

【参考方案1】：

您不应使用named elements，而是使用Document.getElementById() 选择id

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>

【参考方案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');

可以返回

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

使用此 HTML 代码：

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

getElementsByClassName()

这将返回具有特定类名的所有元素。例如：

document.getElementsByClassName('a')

可以返回

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');

可以返回

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>

【参考方案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."