带有复选框的If / Then语句（html）

debugcn 发表于 Dev

retrogirl19

我正在尝试创建符合以下内容的Java if / then语句：如果所有复选框均已选中，则显示此图像，否则显示此其他图像。我完全被困住了，不知道该怎么办...

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

不明确的

您可以编写以下代码：

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);
});