js實現全選和反選功能

2021-07-08 20:09:33 字數 2638 閱讀 7275

全選反選

足球籃球

跑步登山

唱歌跳舞

思路:1、獲取元素。2、用for迴圈歷遍陣列,把checkbox的checked設定為true即實現全選,把checkbox的checked設定為false即實現不選。3、通過if判斷,如果checked為true選中狀態的,就把checked設為false不選狀態,如果checked為false不選狀態的,就把checked設為true選中狀態。

js**:

1

<

script

>

2window.onload

=function

();12

};13

uncheck.onclick

=function

();17

};18

othercheck.onclick

=function

()23

else

2627

};28

};29

};30

script

>

html**:

1 全選:<

input

type

="button"

id="all"

value

="全選"

/><

br />

2 不選<

input

type

="button"

id="uncheck"

value

="不選"

/><

br />

3 反選<

input

type

="button"

id="othercheck"

value

="反選"

/><

br />

4<

div

id="div"

>

5<

input

type

="checkbox"

/><

br />

6<

input

type

="checkbox"

/><

br />

7<

input

type

="checkbox"

/><

br />

8<

input

type

="checkbox"

/><

br />

9<

input

type

="checkbox"

/><

br />

10<

input

type

="checkbox"

/><

br />

11<

input

type

="checkbox"

/><

br />

12<

input

type

="checkbox"

/><

br />

13<

input

type

="checkbox"

/><

br />

14<

input

type

="checkbox"

/><

br />

15<

input

type

="checkbox"

/><

br />

16<

input

type

="checkbox"

/><

br />

17<

input

type

="checkbox"

/><

br />

18<

input

type

="checkbox"

/><

br />

19<

input

type

="checkbox"

/><

br />

20<

input

type

="checkbox"

/><

br />

21<

input

type

="checkbox"

/><

br />

22<

input

type

="checkbox"

/><

br />

23<

input

type

="checkbox"

/><

br />

24<

input

type

="checkbox"

/><

br />

25div

>

js實現全選和反選功能

1.頁面 html head title 匯出excel title head body p style text align center padding top 15px 選擇班級 select name claid id claid style color 999999 option valu...

jquery實現全選和反選功能

jquery操作核取方塊的選中和不選中狀態非常簡單,使用attr 來設定 checked 屬性的值,true未選中,false為未選中,在整個全選 反選過程中注意處理全選核取方塊的選中狀態,以及獲取選中選項的值。ul id list li label input type checkbox valu...

jquery實現全選 反選功能

如何利用jquery是先簡單的全選反選功能 首先我們需要載頁面中引入jquery jquery 3.4.1.min.js script 然後我們需要引入input標籤 全選 checkbox id checkall 反選 checkbox id checkother checkbox li chec...