JS implémente la sélection de cases à cocher CheckBox, pas de sélection ou pas de sélection de compétences function_javascript

Le contrôle CheckBox indique si un état spécifique (c'est-à-dire une option) est sélectionné (on, valeur 1) ou effacé (off, valeur 0). Utilisez ce contrôle dans votre application pour proposer à l'utilisateur un choix « Vrai/Faux » ou « Oui/non ». Étant donné que les CheckBox fonctionnent indépendamment les unes des autres, les utilisateurs peuvent sélectionner n'importe quel nombre de CheckBox en même temps pour combiner les options.

CheckBox JS implémente les fonctions de tout sélectionner, de ne pas sélectionner et de ne pas tout sélectionner. Le contenu spécifique est le suivant

.

Choses :

• 1. Obtenez des éléments
• 2. Sélectionnez tout, désélectionnez, inversez la sélection et ajoutez des événements de clic
• 3. Utiliser la case à cocher pour la boucle
• 4. Cochez la case sur true pour tout sélectionner
• 5. Définissez coché la case sur false pour désélectionner
• 6. Grâce au jugement, si vérifié est vrai, définissez vérifié sur faux, et si vérifié est faux, définissez vérifié sur vrai .
  

code html :

 <input type="button" value="全选" id="sele"/>
  <input type="button" value="不选" id="setinterval"/>
  <input type="button" value="反选" id="clear"/>
   <div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

code js :

<script>
window.onload=function(){

var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}



}
</script>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.