jQuery(全選 反選)與每個選項的聯動

2021-08-04 17:37:32 字數 843 閱讀 5216

專案在使用全選/反選功能時,一般通過單個核取方塊實現,並且要求此核取方塊與每個選項的核取方塊實現實時的聯動功能。這句話讀起來有點繞,直接上**,簡潔易懂:

//html部分

type="checkbox"

name="fruit"/>蘋果

type="checkbox"

name="fruit"/>菠蘿

type="checkbox"

name="fruit"/>芒果

type="checkbox"

id="all_ck"/>全選

//jquery部分

//全選 與 每一項 的聯動   方法一:

$('[name="fruit"]:checkbox').click(function

() })

$('#all_ck').prop('checked',biaozhi);

})//全選 與 每一項 的聯動 方法二:【更簡潔!】

$('[name="fruit"]:checkbox').click(function

())//全選與反選(通過單一核取方塊實現)

$('#all_ck').click(function

()else

})

效果圖:

解釋:

當列表項被全部勾選時,下面的「全選」框也會聯動選中;

一旦上面有任意乙個選項的勾選狀態被取消,下面的「全選」框也會聯動取消。

jquery全選 反選

function a flag 改變select的text ddlyeargroup 0 options 0 text all 其他參考 ddlstep empty 清空 ddlstep attr value 9 根據value選擇 ddlstep 0 selectedindex 1 select下...

jquery全選 全不選 反選技巧

按鈕 全選 取消全選 反選用函式,可以實現分頁的ajax傳值後生成的頁面,也能全選,取消全選,反選 選中所有 function selectall 取消選中所有 function unselect 反選 function reverseselect else 注 最好用prop屬性 判斷input框...

select 全選和反選 jquery

checkbox id in shareuser 10 name shareuser value 10 10 checkbox id in shareuser 11 name shareuser value 11 11 checkbox id in shareuser 12 name shareus...