javascript 3 状态复选框答案

【问题标题】：javascript 3 state checkboxjavascript 3 状态复选框
【发布时间】：2022-01-23 19:45:04
【问题描述】：

我有一个很长的项目列表，每个项目都有一个具有 3 种状态的复选框（是=勾选，否=X'd，不适用=未勾选）。使用复选框，我可以使用 .indeterminate 元素切换 3 种状态，如下所示：

function chkbx(cb) {
    if (cb.readOnly) cb.checked = cb.readOnly = false;
    else if (!cb.checked) cb.readOnly = cb.indeterminate = true;
    else if (cb.checked) cb.readOnly = cb.indeterminate = false;
}

function showtext() {
if (cert27.checked) {document.getElementById('BoxB27').style.display = "block";} else {document.getElementById('BoxB27').style.display = "none";}

if (!cert27.checked) {document.getElementById('BoxA27').style.display = "block";} else {document.getElementById('BoxA27').style.display = "none";}

if (cert27.indeterminate) {document.getElementById('BoxC27').style.display = "block";} else {document.getElementById('BoxC27').style.display = "none";}     
if (cert28.checked) {document.getElementById('BoxB28').style.display = "block";} else {document.getElementById('BoxB28').style.display = "none";}

if (!cert28.checked) {document.getElementById('BoxA28').style.display = "block";} else {document.getElementById('BoxA28').style.display = "none";}

if (cert28.indeterminate) {document.getElementById('BoxC28').style.display = "block";} else {document.getElementById('BoxC28').style.display = "none";}         

}

<body>
<table>
<tr>
<td><input type="checkbox" id="cert27" value="25" onclick="showtext();chkbx(this);" /></td>
<td>Banannas</td>
</tr>
<tr>
<td><input type="checkbox" id="cert28" value="15" onclick="showtext();chkbx(this);" /></td>
<td>Sugar</td>
</tr>
</table>

<span id="BoxA27" style="display:none">Bananas excluded.</span>
<span id="BoxB27" style="display:none">Bananas included.</span>
<span id="BoxC27" style="display:none">Bananas are N/A.</span>
<span id="BoxA28" style="display:none">Sugar excluded.</span>
<span id="BoxB28" style="display:none">Sugar included.</span>
<span id="BoxC28" style="display:none">Sugar is N/A.</span>

</body>

但是，当更改复选框的状态时，不仅会弄乱显示的文本，还会更改其他框的文本，并且无法正确显示复选框状态。

如何获取每个复选框的正确状态，并显示正确的文本？

【问题讨论】：

标签： javascript html

【解决方案1】：

当您点击checkbox 时，您首先需要调用chkbx() 来更新其状态，然后再调用showtext()。

然后，要处理每个状态显示的消息，您应该使用if...else if...else，因为!checkbox.checked 和checkbox.indeterminate 可以同时是true：

function chkbx(cb) {
    if (cb.readOnly) cb.checked = cb.readOnly = false;
    else if (!cb.checked) cb.readOnly = cb.indeterminate = true;
    else if (cb.checked) cb.readOnly = cb.indeterminate = false;
}

function showtext() {

  if(cert27.checked){
    document.getElementById('BoxB27').style.display = "block";
    document.getElementById('BoxA27').style.display = "none";
    document.getElementById('BoxC27').style.display = "none";
  } else if (cert27.indeterminate) {
    document.getElementById('BoxC27').style.display = "block";
    document.getElementById('BoxA27').style.display = "none";
    document.getElementById('BoxB27').style.display = "none";
  } else {
    document.getElementById('BoxA27').style.display = "block";
    document.getElementById('BoxB27').style.display = "none";
    document.getElementById('BoxC27').style.display = "none";
  }
  
  if(cert28.checked){
    document.getElementById('BoxB28').style.display = "block";
    document.getElementById('BoxA28').style.display = "none";
    document.getElementById('BoxC28').style.display = "none";
  } else if (cert28.indeterminate) {
    document.getElementById('BoxC28').style.display = "block";
    document.getElementById('BoxA28').style.display = "none";
    document.getElementById('BoxB28').style.display = "none";
  } else {
    document.getElementById('BoxA28').style.display = "block";
    document.getElementById('BoxB28').style.display = "none";
    document.getElementById('BoxC28').style.display = "none";
  }

}

<body>
<table>
<tr>
<td><input type="checkbox" id="cert27" value="25" onclick="chkbx(this);showtext();" /></td>
<td>Banannas</td>
</tr>
<tr>
<td><input type="checkbox" id="cert28" value="15" onclick="chkbx(this);showtext();" /></td>
<td>Sugar</td>
</tr>
</table>

<span id="BoxA27" style="display:none">Bananas excluded.</span>
<span id="BoxB27" style="display:none">Bananas included.</span>
<span id="BoxC27" style="display:none">Bananas are N/A.</span>
<span id="BoxA28" style="display:none">Sugar excluded.</span>
<span id="BoxB28" style="display:none">Sugar included.</span>
<span id="BoxC28" style="display:none">Sugar is N/A.</span>

</body>

【讨论】：