Explication détaillée des exemples de méthodes jQuery pour faire fonctionner CheckBox-js tutoriel-php.cn

Explication détaillée des exemples de méthodes jQuery pour faire fonctionner CheckBox

黄舟

Libérer： 2017-12-04 10:48:37

original

1683 Les gens l'ont consulté

Dans notre processus de développement actuel, qu'il s'agisse de HTML ou de jQuery, c'est l'une des choses que nous devons apprendre. Je pense que tout le monde connaît CheckBox, et il sera utilisé à la fois en HTML et en jQuery. . Aujourd'hui, nous allons donc vous présenter une introduction détaillée aux exemples de méthodes d'exploitation de CheckBox par jQuery !

Exemples de la façon dont jQuery exploite CheckBox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     
<HTML>     
 <HEAD>     
  <TITLE> New document．nbsp;</TITLE>     
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
    <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>     
  <SCRIPT LANGUAGE="javascript">     
  <!--     
   $("document．quot;).ready(function(){     
         
    $("#btn1").click(function(){     
          
    $("[name=&#39;checkbox&#39;]").attr("checked",&#39;true&#39;);//全选     
       
    })     
       $("#btn2").click(function(){     
          
    $("[name=&#39;checkbox&#39;]").removeAttr("checked");//取消全选     
       
    })     
    $("#btn3").click(function(){     
          
    $("[name=&#39;checkbox&#39;]:even").attr("checked",&#39;true&#39;);//选中所有奇数     
       
    })     
    $("#btn4").click(function(){     
          
    $("[name=&#39;checkbox&#39;]").each(function(){     
          
        
     if($(this).attr("checked"))     
   {     
    $(this).removeAttr("checked");     
         
   }     
   else    
   {     
    $(this).attr("checked",&#39;true&#39;);     
         
   }     
        
    })     
       
    })     
     $("#btn5").click(function(){     
    var str="";     
    $("[name=&#39;checkbox&#39;][checked]").each(function(){     
     str+=$(this).val()+""r"n";     
   //alert($(this).val());     
    })     
   alert(str);     
    })     
   })     
  //-->     
  </SCRIPT>     
       
 </HEAD>     
    
 <BODY>     
 <form name="form1" method="post" action="">     
   <input type="button" id="btn1" value="全选">     
   <input type="button" id="btn2" value="取消全选">     
   <input type="button" id="btn3" value="选中所有奇数">     
   <input type="button" id="btn4" value="反选">     
   <input type="button" id="btn5" value="获得选中的所有值">     
   <br>     
   <input type="checkbox" name="checkbox" value="checkbox1">     
   checkbox1     
   <input type="checkbox" name="checkbox" value="checkbox2">     
   checkbox2     
   <input type="checkbox" name="checkbox" value="checkbox3">     
   checkbox3     
   <input type="checkbox" name="checkbox" value="checkbox4">     
   checkbox4     
   <input type="checkbox" name="checkbox" value="checkbox5">     
   checkbox5     
   <input type="checkbox" name="checkbox" value="checkbox6">     
   checkbox6     
   <input type="checkbox" name="checkbox" value="checkbox7">     
   checkbox7     
   <input type="checkbox" name="checkbox" value="checkbox8">     
 checkbox8     
 </form>

Copier après la connexion

Résumé :

Cet article vous présente des exemples de la façon dont jQuery exploite CheckBox à travers des exemples In. détail, mes amis ont aussi une certaine compréhension de cela, j'espère que cela vous sera utile dans votre travail !

Recommandations associées :

Méthode Jquery en un clic pour contrôler la sélection des cases à cocher, la sélection inverse et la désélection

Comment obtenir plusieurs valeurs sélectionnées dans la case à cocher dans js

la case à cocher implémente le clic événement Déclencher la modification du contenu de l'élément span

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!