javascript复选框全选，取消全选，反转选择

Question

我正在执行的脚本遇到问题。实际上我给了类似的东西，因为我正在为我的 Intranet 做一个邮箱。

<script type="text/javascript">
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById('box-table-a').firstChild;
    while (Chckbox!=null) {
        if (Chckbox.nodeName=="INPUT")
            if (Chckbox.getAttribute("type")=="checkbox") {
                blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
                document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
            }
        Chckbox = Chckbox.nextSibling;
    }
}
</script><form>
<table width="100%" border="0" id='box-table-a'>
  <tr>
    <th scope="col" width="15%"><strong>Exp&eacute;diteur</strong></th>
    <th scope="col" width="60%"><strong>Message</strong></th>
    <th scope="col" width="10%"><strong>Date</strong></th>
    <th scope="col" width="15%"><strong>Actions</strong></th>
  </tr><?php $sql="SELECT * FROM `messages` WHERE `id_destinataire`='".$_SESSION['login']."' AND `trash`='0' ORDER BY id DESC LIMIT ".$premiereEntree.", ".$messagesParPage."" ;
$result=mysql_query($sql) or die(__LINE__.mysql_error().$sql);
$i=0; 
while($data=mysql_fetch_assoc($result)) {                                                ?>
<tr>
<td align="left"><?php $req="SELECT * FROM `gestionnaire` WHERE `login`='".$data['id_expediteur']."'";
$result2=mysql_query($req) or die(__LINE__.mysql_error().$req);
$expediteur=mysql_fetch_assoc($result2);  ?><img src="<?php if (!empty($expediteur['urlavatar'])) {echo $expediteur['urlavatar']; } else {echo "images/noAvatar.gif" ;} ; ?>" width="50px" height="50px" /><br /><?php echo $expediteur['nom'].' '.$expediteur['prenom'] ; ?></td>
<td><?php if($data['lu']=='0') { echo '<p align="left"><img src="images/Gnome-Mail-Unread-32.png" width="24px" height="24px" /><strong>  '.$data['titre'].'</strong></p>';
$nbChar = 150; // Nb. de caractères sans '...'

if(strlen($data['message']) >= $nbChar)
    $message = substr($data['message'], 0, $nbChar).' [...]';

echo '<p align="left"><i>'.$message.'</i></p>';
}
else { echo '<p align="left"><img src="images/Gnome-Emblem-Mail-32.png" width="24px" height="24px" /><strong>  '.$data['titre'].'</strong></p>';
$nbChar = 150; // Nb. de caractères sans '...'

if(strlen($data['message']) >= $nbChar)
    $message = substr($data['message'], 0, $nbChar).' [...]';

echo '<p align="left"><i>'.$message.'</i></p>';} ;
?></td>
<td><?php echo  date('d-m-Y H:i',strtotime($data["date"])) ; ?></td>
<td><a href="index.php?p=liremessage&amp;id=<?php echo $data['id'] ; ?>"><img src="images/email_open.png" alt="Lire le message" width="24px" height="24px" border="0"  /></a> <img src="images/Gnome-Mail-Forward-32.png" alt="Transf&eacute;rer le message" width="24px" height="24px" border="0"  /> <a href="deletemessage.page?id=<?php echo $data['id'] ; ?>" onclick="return confirm('Voulez vous vraiment supprimer ce message?')"><img src="images/mail-trash.png" alt="Supprimer ce message" width="24px" height="24px" border="0"  /></a> <input type="checkbox" name="action[<?php echo ++$i; ?>]" id="checkbox<?php echo $i; ?>"  /></td>
</tr>
<?php } ; ?>
</table>
<table width="100%" border="0">
  <tr>
    <td>Actions: <input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Tout d&eacute;cocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Inverser la s&eacute;lection" onClick="GereChkbox('div_chck','2');"></td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

事实上，由于脚本的原因，它并没有真正起作用，而且我在控制台中没有错误消息。

非常感谢您的帮助。

亲切的问候。

Answer 1

无论如何，这里有一个函数可以切换/选中/取消选中给它的任何复选框：

function changeCheckboxes(list, value){
    for(var i = list.length - 1 ; i >=0 ; i--){
        list[i].checked = (typeof value === 'boolean') ? value : !list[i].checked ;
   }
}

它接受一个节点列表或复选框数组作为第一个参数。如下使用...

切换复选框：

changeCheckboxes(allCheckboxes);

检查复选框：

changeCheckboxes(allCheckboxes, true);

取消选中复选框：

changeCheckboxes(allCheckboxes, false);

要获取所有复选框，您可以这样做：

var inputs = document.getElementsByTagName('input');
var allCheckboxes = [] ;
    for (var j = inputs.length-1 ; j >= 0 ; j--){
        if (inputs[j].type === 'checkbox'){
        allCheckboxes.push(inputs[j]);
    }
}