CheckBox 조작을 위한 jQuery 메소드 예제에 대한 자세한 설명-JS 튜토리얼-php.cn

CheckBox 조작을 위한 jQuery 메소드 예제에 대한 자세한 설명

黄舟

풀어 주다： 2017-12-04 10:48:37

원래의

1689명이 탐색했습니다.

실제 개발 과정에서 html이든 jQuery든 꼭 배워야 할 것 중 하나입니다. CheckBox는 html과 jQuery 모두에서 사용되기 때문에 오늘은 다들 익히 알고 계실 거라 믿습니다. CheckBox를 운용하는 jQuery의 메소드 예시를 자세히 소개합니다!

jQuery의 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>

로그인 후 복사

요약:

이 글에서는 예제를 통해 jQuery의 CheckBox 조작 방법 예를 자세히 소개하고 있으니 친구들도 어느 정도 이해가 되었으면 좋겠습니다. 당신의 작업에 도움이 되었습니다!