Question

我尝试创建一个Javascript 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>

Answer 1

您可以编码：

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

Answer 2

参考：

<!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语句带复选框（html）

2 个答案: