欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jquery如何判斷checkbox是否全選中

這篇文章主要介紹了jquery如何判斷checkbox是否全選中的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇jquery如何判斷checkbox是否全選中文章都會有所收獲,下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)與策劃設(shè)計,魏縣網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:魏縣等地區(qū)。魏縣做網(wǎng)站價格咨詢:18982081108

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

本教程操作環(huán)境:windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

jquery判斷checkbox是否全選中的方法:檢測checkbox多選元素個數(shù)和選中元素個數(shù)是否相等。

實現(xiàn)步驟:

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

$("input[type='checkbox']")

會返回一個包含全部checkbox元素的jQuery對象。

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

$(":checked")

會返回一個包含所有選中元素的jQuery對象。

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

checkbox元素對象.length==選中元素對象.length
  • 如果相等(返回值為true),則checkbox全選中

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

實現(xiàn)示例:判斷checkbox是否全選中

<!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=$("input[type='checkbox']").length;
					var len2=$(":checked").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>

jquery如何判斷checkbox是否全選中

擴展知識:屬性值選擇器

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

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

    attribute: 一個屬性名

    value:  一個屬性值

$(function(){

    $('a[hreflang|="en"]').css("border","2px solid red");
        //查找hreflang屬性值是英語的所有鏈接。
});

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

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

$(function(){
    $('input[name*="man"]').css("border","2px solid red");
        //查找所有 input 的 name 屬性中帶有 'man' 的元素,并添加邊框
});

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

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

$(function(){

    $('input[name~="man"]').css("border","2px solid red");
        //查找所有屬性中含有 'man' 這個單詞的文本框,并且修改其文本值。
})

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

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

$(function(){
    $('input[name$="letter"]').css("border","2px solid red");
            //查找所有的屬性名稱以"letter"的結(jié)束,并把他們的文字輸入。
})

$("[attribute='value']")
選擇指定屬性是給定值的元素。
attribute: 一個屬性名。
value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個帶引號的字符串。

$(function(){
    $('input[value="Hot Fuzz"]').next().text("Hot Fuzz");
        //查找input 中 value 值等于 Hot Fuzz 的將其后面的元素添加文本。
})

$("[attribute!='value']")
  選擇指定屬性不等于這個值的元素
  attribute:一個屬性名
  value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個帶引號的字符串。

$(function(){
    $('input[name!="newsletter"]').next().append("<b>;not newsletter</b>")
            //查找input 中name 不等于 newletter 的下一個元素追加 文本。
                注:主要含有這個字符串就行。
})

$("[attribute^='value']")
  選擇指定屬性就是以給定字符串開始的元素。
  attribute:一個屬性名
  value: 一個屬性值,可以是一個不帶引號的一個單詞,或一個帶引號的字符串。

$(function(){
    $('input[name^="news"]').val("news here!");
    //查找input 中 name 中含有new 這個字符串的 添加value 值。
})

$("[attribute]")
  選擇所有具有指定屬性的元素,該屬性可以是任何值。
  attribute: 一個屬性名。

$(function(){
    $('div[id]').css("color","red")
            //給綁定id屬性的div的文本顏色變成紅色。
})

$("[attributeFilter1][attributeFilter2]attributeFilter3")

選擇匹配所有指定的屬性篩選器的元素
  attributeFilter1: 一個屬性過濾器
  attributeFilter2:另一個屬性過濾器,用于進一步減少被選擇的元素。
  attributeFilterN: 根據(jù)需要有更多的屬性過濾器。

$(function(){
    $('input[id][name$="man"]').val('only this one')
    //查找那些有id屬性,并且name 屬性以man結(jié)尾的輸入框,并設(shè)置值。
})

關(guān)于“jquery如何判斷checkbox是否全選中”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“jquery如何判斷checkbox是否全選中”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標題:jquery如何判斷checkbox是否全選中
文章鏈接:http://chinadenli.net/article48/gjcshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、商城網(wǎng)站、網(wǎng)站收錄、網(wǎng)頁設(shè)計公司、網(wǎng)站制作、電子商務(wù)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)