checkbox做全選按鈕

2022-05-04 09:36:09 字數 1804 閱讀 9761

1.先寫乙個html頁面,裡面寫乙個全選按鈕和幾個核取方塊,實現下面2個要求

(1)點選全選按鈕選中時,所有的核取方塊選中.

(2)點選全選按鈕取消選中時,所有核取方塊取消選中。

<

input

type

="checkbox" id="quanxuan"

/>全選<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

2.js處理**

$("#quanxuan").click(function())

以上**完全可以完美的實現要求的2個功能。這裡需要注意的是不能使用下面的方法做全選按鈕,因為下面的方法有嚴重的不足之處。

1.html頁面

<

input

type

="checkbox"

onclick

="quanxuan(this)"

/>全選<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

<

input

type

="checkbox"

class

="qx"

/>aa<

br />

2.處理頁面

上面的方法看似也可以實現全選按鈕的功能,但是執行下列操作步驟後就會出現問題:

(1)點選任意乙個核取方塊,使核取方塊處於選中狀態;

(2)點選全選按鈕,所有核取方塊變成了選中狀態;

(3)再次點選全選按鈕,所有按鈕應該取消選中狀態。但是問題出現了,第1步中選中的選中的按鈕還是處於選中狀態。

這就是第二種全選按鈕方法存在的弊端,所以全選按鈕最好使用第一種,方便而實用。

checkbox全選及全選遍歷獲得值

jquery.attr 獲取 設定物件的屬性值,如 input name chk list attr checked 讀取所有name為 chk list 物件的狀態 是否選中 input name chk list attr checked true 設定所有name為 chk list 物件的c...

Html 實現checkbox全選 非全選 單選

看了很多的的checkbox案例,大多都是全選 單選 非全選,但是卻沒有建立全域性選擇與單選之間的關係。全域性選擇與單選有以下兩點關係 1 當我把所有單選都選擇上的時候,全選應該是被選擇狀態 2 當我取消乙個單選時,全選應該是取消的狀態 如果不存在全域性選擇與單選之間的關係,則會出現如下兩圖情況 實...

checkbox 一鍵全選與取消全選

使用jquery實現的乙個checkbox一鍵全選小demo,能夠一鍵全選,也能夠一鍵取消全選 都選中的情況下才能一鍵取消全選 如果全選狀態下某個checkbox取消勾選,一鍵全選checkbox也會被取消。個人感覺這個小demo通用性很好。先附上我的小demo 為了方便測試檢視效果,我直接將整個h...