recherche

Maison >interface Web >js tutoriel >jQuery détermine si la case est cochée, sélectionne tout et inverse le code d'implémentation de la sélection

jQuery détermine si la case est cochée, sélectionne tout et inverse le code d'implémentation de la sélection

高洛峰
高洛峰original
2017-02-06 13:20:211233parcourir

jQuery détermine si la case à cocher (checkbox) est sélectionnée :
if($("#id").attr("checked")==true)

jQuery implémente la case à cocher (check Box) code sélectionné, entièrement sélectionné/sélectionné à l'inverse : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox（复选框）是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name=&#39;checkbox&#39;]").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name=&#39;checkbox&#39;]").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 });

 $("#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="";
  //$("input:checkbox[name=&#39;checkbox&#39;]:checked").each(function(){//可以
  $("[name=&#39;checkbox&#39;][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});
//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <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>
</body>
</html>

Pour plus de jugement jQuery sur la case à cocher (case à cocher) si elle est sélectionnée et les articles liés au code d'implémentation entièrement sélectionné et sélectionné à l'inverse, veuillez prêter attention à le site PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery implémente toutes les sélections de cases à cocher/désélectionner tout/sélection inverse et obtient la valeur sélectionnéeArticle suivant：jQuery implémente toutes les sélections de cases à cocher/désélectionner tout/sélection inverse et obtient la valeur sélectionnée

Articles Liés

Voir plus