Question

0

178

Views

javascript 3 state checkbox

I have a very long list of items each with a checkbox that has 3 states (Yes=ticked, No=X'd, Not Applicable=unticked). Using a checkbox I was able to toggle with 3 states using .indeterminate element, as follows:

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>

However, when changing the state of a checkbox, it not only messes up the displayed text, but also for changes the other boxes texts and does not correctly show the checkbox status.

How do I get the correct status of each checkbox, and display the correct text?

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-06T15:44:25.835Z

When you click on a checkbox you first need to call chkbx() to update its state and then call showtext().

Then, to handle the message displayed for each of the state, you should use if...else if...else because !checkbox.checked and checkbox.indeterminate can both be true at the same time :

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>

0

178

javascript 3 state checkbox

1 answers

0

Find remote jobs

Andres GPT