javascript 3 状态复选框

Posted

技术标签:

【中文标题】javascript 3 状态复选框【英文标题】：javascript 3 state checkbox 【发布时间】：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>

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

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

【问题讨论】：

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

【讨论】：

以上是关于javascript 3 状态复选框的主要内容，如果未能解决你的问题，请参考以下文章

在 JavaScript 中使用 IF 处理复选框状态

页面刷新JavaScript，Spring Boot时如何保持复选框处于选中状态？

当复选框将状态更改为“已检查”（纯javascript）时跨表行

javascript实现复选框的全选全不选

Thingsboard_导航到新仪表板状态_Widget 自定义操作_Javascript 代码

将复选框重置为初始状态