js實現checkbox全選 不選與反選

2022-05-08 20:27:09 字數 3827 閱讀 4866

一、思路:

1. 獲取元素

2. 給全選 不選 反選新增點選事件

3. 用for迴圈checkbox

4. 把checkbox的checked設定為true即實現全選

5. 把checkbox的checked設定為false即實現不選

6. 通過if判斷,如果checked為true選中狀態的,就把checked設為false不選狀態,如果checked為false不選狀態的,就把checked設為true選中狀態。

二、html**:?1

2345

6789

1011

1213

1415

1617

1819

2021

<inputtype="button"value="全選"id="sele"/>

<inputtype="button"value="不選"id="setinterval"/>

<inputtype="button"value="反選"id="clear"/>

<divid="checkboxs">

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

<inputtype="checkbox"/><br/>

三、js**:?1

2345

6789

1011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

34

checkBox全選及提交JS

js 單擊全部選擇核取方塊或者全部取消核取方塊 針對form function checkallbox formobject for i 0 i formobject.elements.length i 單擊某個chekbox 選擇一組checkbox,全部選擇或全部取消 group checkbo...

Html 實現checkbox全選 非全選 單選

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

JS實現全選 不選 反選

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