DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> jquery如何判斷checkbox(復選框)是否被選中
jquery如何判斷checkbox(復選框)是否被選中
編輯:前端技巧     

誰都知道在html如果一個復選框被選中是checked="checked"。但是我們如果用jquery alert($("#id").attr("checked")) 會提示您是true而不是checked。所以很多朋友判斷 if($("#id").attr("checked")=="true") 這個是錯誤的,其實應該是 if($("#id").attr("checked")==true)。

例子裡面包括了一下幾個功能:

 
<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="獲得選中的所有值">

代碼

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </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").ready(function(){
              $("#btn1").click(function(){
                  $("[name='checkbox']").attr("checked",'true');//全選
  
              });
              $("#btn2").click(function(){
                  $("[name='checkbox']").removeAttr("checked");//取消全選
  
              });
              $("#btn3").click(function(){
                  $("[name='checkbox']:even").attr("checked",'true');//選中所有奇數
  
              })
              $("#btn4").click(function(){
                  $("[name='checkbox']").each(function(){
                  if($(this).attr("checked"))
                  {
                      $(this).removeAttr("checked");
    
                  }
                  else
                  {
                      $(this).attr("checked",'true');
    
                  }
              })
          })
               $("#btn5").click(function(){
              var str="";
              $("[name='checkbox'][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>

對於上面的代碼,我們可以使用“HTML在線編輯器”進行測試一下。

本文來源:雨中無傘-cnblog(http://www.cnblogs.com/yuzhongwusan/archive/2009/02/27/1399264.html)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved