If/Then statements with checkboxes (html)

Question

I'm trying to create a Javascript if/then statement that goes along the lines of: if all of the checkboxes are checked then show this image, else show this other image. I'm completly stuck and not sure what to do...

<head>
<center>
<FONT FACE="LYDIAN,COMIC SANS MS,ARIAL" COLOR="#BDF6F4" SIZE="6"><MARQUEE     LOOP="N"|"INFINITE" BGCOLOR="#E0BDF6" WIDTH="68%" HEIGHT="60" ALIGN="MIDDLE"     HSPACE="4%" VSPACE="25">My To-Do List: Just Do It!</MARQUEE></FONT>
<p>
<span style="color:#937AF0">
Put 'To-Do' tasks in order according to priority, to add a new task simply click the add button. When task on list is completed, check done!
</p>
</center>
<style>
table, th, td
{
border: 1px solid black;
}

</style>
</head>
<body>
<body style="background:#E6E6FA">
<center>
<table id="specialtable">
<table style="background:#BDF6F4">

<tr>
<th> Done</th>
<th>Priority</th>
<th>Task</th>
</tr>
<tr>
<td><input type="checkbox"</td>  
<td>1<br></td>
<td><input type="text"></td>
<td><button onclick="addRow(this);">Add</button><br></td>    
</tr>
</table>
</center>


<script type = "text/javascript">  
 function addRow(e)
{
var current = e.parentNode.parentNode; // <tr>...</tr>
 var tnew = current.cloneNode(true);
 var rowCount = current.parentNode.getElementsByTagName("tr").length;
 tnew.getElementsByTagName("td")[1].textContent = rowCount;
  current.parentNode.appendChild(tnew);
 }  


</script>
 </head>
 <body>

HTML doesn't have if statements. If you are talking about a programming language which operates on the HTML you should tag your question with that language and show the code you have already written. — takendarkk, Feb 01 '15 at 04:26
That's good but now you should show what you have attempted so far and explain what exactly didn't work about it. — takendarkk, Feb 01 '15 at 04:52
Nothing really, I've been trying to look up ways to check if all of the boxes are checked and then display an image but I haven't come up with anything. I'm not sure what to try — retrogirl19, Feb 01 '15 at 04:55
Atleast add you code, so that we can rectify problem you are facing. — Gaurav Dave, Feb 01 '15 at 04:57

Ram · Accepted Answer · 2015-02-01T05:13:51.900

You could code:

var thisImage  = document.getElementById('thisImage'),
    thatImage  = document.getElementById('thatImage'),
    checkboxes = document.querySelectorAll('input[type=checkbox]'),
    cLen       = checkboxes.length;

function changeHandler() {
   // compare the length of the checkboxes 
   // with the length of checked ones 
   var allChecked = Array.prototype.filter.call(checkboxes, function(e) {
       return e.checked;
   }).length === cLen;

   if (allChecked) {
       thisImage.style.display = 'block';
       thatImage.style.display = 'none';
   } else {
       thisImage.style.display = 'none';
       thatImage.style.display = 'block';   
   }
}

Array.prototype.forEach.call(checkboxes, function (e) {
    e.addEventListener('change', changeHandler, false);
});

score 0 · Answer 2 · answered Feb 01 '15 at 05:34

Refer this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function count(obj){
  var x = document.getElementsByTagName("INPUT");
  var y = [];
  for (var cnt = 0; cnt < x.length; cnt++) {
      if (x[cnt].type == "checkbox") y.push(x[cnt]);
  }

  var chkboxCount = y.length;
var cnt = 0;
for(var i=1; i<=chkboxCount; i++){
 var checkbox = 'chk' + i;
 if(document.getElementById(checkbox).checked){
  cnt++;
 }
}

if(cnt == 3){
  document.getElementById('pic').innerHTML = '<img src = "img_flwr.gif">';
} else{
  document.getElementById('pic').innerHTML = '<img src = "img_tree.gif">';
}

}


</script>
<input type="checkbox" name="chk1" id="chk1" onclick="count(this)">
<input type="checkbox" name="chk2" id="chk2" onclick="count(this)">
<input type="checkbox" name="chk3" id="chk3" onclick="count(this)">
<br>
<div id="pic"></div>

</body>
</html>

If/Then statements with checkboxes (html)

2 Answers2