首頁 > web前端 > js教程 > 主體

jquery如何判斷checkbox(複選框)是否被選中?(原始碼)

云罗郡主
發布: 2018-10-29 14:24:40
轉載
5874 人瀏覽過

jquery如何判斷checkbox(複選框)?相信有很多剛接觸jquery的朋友都會有這樣的疑問。本章就跟大家介紹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=&#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(複選框)是否被選取的全部介紹,如果您想了解更多有關JavaScript影片教學,請關注PHP中文網。


#

以上是jquery如何判斷checkbox(複選框)是否被選中?(原始碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:lvyestudy.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板