javascript 3状态复选框

我有一个很长的项目列表，每个项目都有一个复选框，其中有3种状态(Yes=勾选，No=X’d，Not Applicable=未勾选(。使用复选框，我可以使用.indefinition元素切换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>

但是，当更改复选框的状态时，它不仅会混淆显示的文本，而且会更改其他复选框的文本，并且不会正确显示复选框状态。

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

单击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>

相关内容

最新更新

热门标签：