首頁 > web前端 > 前端問答 > jquery怎麼判斷checkbox是否全選中

jquery怎麼判斷checkbox是否全選中

青灯夜游
發布: 2022-09-07 18:39:31
原創
2654 人瀏覽過

判斷步驟:1、取得全部checkbox元素,語法“$("input[type='checkbox']")”,會傳回一個jQuery物件;2、選取所有選取的元素,語法“$ (":checked")”,會傳回一個JQ物件;3、計算兩個物件的長度,並判斷兩個長度是否相等,語法“checkbox元素物件.length==選取元素物件.length”,如果相等則全選中,反之則未全部選中。

jquery怎麼判斷checkbox是否全選中

本教學操作環境:windows7系統、jquery3.6.1版本、Dell G3電腦。

jquery判斷checkbox是否全選中的方法:偵測checkbox多重選取元素個數和選取元素個數是否相等。

實作步驟:

步驟1:利用屬性值選擇器取得checkbox元素

$("input[type='checkbox']")
登入後複製

會傳回一個包含全部checkbox元素的jQuery物件。

步驟2:利用:checked 選擇器選取所有選取的元素

$(":checked")
登入後複製

會傳回一個包含所有選取元素的jQuery物件。

步驟3:利用length屬性計算兩個jQuery物件的長度,並判斷兩個長度是否相等

checkbox元素对象.length==选中元素对象.length
登入後複製
  • 如果相等(返回值為true),則checkbox全選中

  • 如果不相等(傳回值為false),則checkbox未全部選取

<strong></strong>

jquery怎麼判斷checkbox是否全選中

<strong></strong>

<strong></strong>



# #實作範例:判斷checkbox是否全選中<strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { var len1=$(&quot;input[type=&amp;#39;checkbox&amp;#39;]&quot;).length; var len2=$(&quot;:checked&quot;).length; if(len1==len2){ console.log("全部选中"); }else{ console.log("未全部选中"); } }); }); </script> </head> <body> <form action="" method="get"> 您喜欢的水果?<br /><br /> <label><input name="Fruit" type="checkbox" value=""/>苹果 </label> <label><input name="Fruit" type="checkbox" value="" />桃子 </label> <label><input name="Fruit" type="checkbox" value="" />香蕉 </label> <label><input name="Fruit" type="checkbox" value="" />梨 </label> </form> <br><br> <button>判断checkbox是否全选中</button> </body> </html></pre><div class="contentsignin">登入後複製</div></div></strong>



#擴充知識:屬性值選擇器






#$("[attribute|='value']")

#選擇指定屬性值等於給定字串或改字串為前綴(該字串後面跟著一個連字符“-”)的元素。

    attribute: 一個屬性名稱

    value:  一個屬性值<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(function(){ $(&amp;#39;a[hreflang|=&quot;en&quot;]&amp;#39;).css(&quot;border&quot;,&quot;2px solid red&quot;); //查找hreflang属性值是英语的所有链接。 });</pre><div class="contentsignin">登入後複製</div></div>
$("[attribute*='value']")

    選擇指定屬性具有包含一個給定的子字串的元素。 (選擇給定的屬性是以包含某些值的元素) attribute: 一個屬性名 value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個引號的字串。

$(function(){
    $(&#39;input[name*="man"]&#39;).css("border","2px solid red");
        //查找所有 input 的 name 属性中带有 &#39;man&#39; 的元素,并添加边框
});
登入後複製


$("[attribute~='value']")

    選用指定屬性以空格分隔的值包含一個給定的元素。 attribute: 一個屬性名稱 value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個引號的字串。

$(function(){

    $(&#39;input[name~="man"]&#39;).css("border","2px solid red");
        //查找所有属性中含有 &#39;man&#39; 这个单词的文本框,并且修改其文本值。
})
登入後複製



$("[attribute$='value']")

    選擇指定屬性是以給定元素結尾的元素。這個元素比較是區分大小寫的。 attribute: 一個屬性名稱 value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個引號的字串。

$(function(){
    $(&#39;input[name$="letter"]&#39;).css("border","2px solid red");
            //查找所有的属性名称以"letter"的结束,并把他们的文字输入。
})
登入後複製

######$("[attribute='value']")######### 選擇指定屬性是給定值的元素。 ### attribute: 一個屬性名稱。 ### value: 一個屬性值,可以是一個不帶引號的一個單字,或一個引號的字串。 ###
$(function(){
    $(&#39;input[value="Hot Fuzz"]&#39;).next().text("Hot Fuzz");
        //查找input 中 value 值等于 Hot Fuzz 的将其后面的元素添加文本。
})
登入後複製
#########$("[attribute!='value']")#########   選擇指定屬性不等於這個值的元素###   attribute:一個屬性名###   value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個引號的字串。 ###
$(function(){
    $(&#39;input[name!="newsletter"]&#39;).next().append("<b>;not newsletter</b>")
            //查找input 中name 不等于 newletter 的下一个元素追加 文本。
                注:主要含有这个字符串就行。
})
登入後複製
#########$("[attribute^='value']")#########   選擇指定屬性就是以給定字串開始的元素。 ###   attribute:一個屬性名###   value: 一個屬性值,可以是一個不帶引號的一個單字,或一個引號的字串。 ###
$(function(){
    $(&#39;input[name^="news"]&#39;).val("news here!");
    //查找input 中 name 中含有new 这个字符串的 添加value 值。
})
登入後複製
#########$("[attribute]")##########   選取所有具有指定屬性的元素,該屬性可以是任何值。 ###   attribute: 一個屬性名稱。 ###
$(function(){
    $(&#39;div[id]&#39;).css("color","red")
            //给绑定id属性的div的文本颜色变成红色。
})
登入後複製
#########$("[attributeFilter1][attributeFilter2]attributeFilter3")############  選擇符合所有指定的屬性篩選器的元素### attributeFilter1: 一個屬性篩選器###   attributeFilter2:另一個屬性篩選器,用於進一步減少被選取的元素。 ###   attributeFilterN: 根據需要有更多的屬性篩選器。 ###
$(function(){
    $(&#39;input[id][name$="man"]&#39;).val(&#39;only this one&#39;)
    //查找那些有id属性,并且name 属性以man结尾的输入框,并设置值。
})
登入後複製
###【推薦學習:###jQuery影片教學###、###web前端影片###】###

以上是jquery怎麼判斷checkbox是否全選中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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