全選全不選,angularJS如何實現?

2021-09-13 14:29:16 字數 894 閱讀 2734

最近在學習angularjs,相比於jquery,angularjs雙向資料繫結的功能真的很方便,很強大。但是在實現checkbox全選全不選的時候,好像沒有找到可以直接用的方法。於是決定自己寫乙個。

jquery的實現思路:操作dom結構樹,找到需要全選的所有子核取方塊;

angularjs的思路:通過資料的雙向繫結實現。

1、js**:

//單個購物車全選;全不選

$scope.selectcart=function ($event,sellerid) {

var flag=$event.target.checked;//主checkbox的選中狀態

var j=$scope.findindex(sellerid);

var list=$scope.cartlist[j];//找到第幾個購物車

//全選or全不選

list.cartisjia=flag;

for(var i=0;i2、html**:

3、ng-checked與ng-model修飾checkbox時的效果:

(1)如果初始狀態ng-checked和ng-model指令同時存在,則核取方塊的初始狀態是否被選中有ng-checked的值來決定。當我們改變ng-model的值時,選中狀態會隨著ng-model的值而改變。

(2)當只有ng-model指令存在時,則核取方塊初始狀態(是否被選中)由ng-model的值來決定,且它繫結的變數的值為隨核取方塊是否被選中而變化(選中為true,未選中為false)

(3)當只有ng-checked指令存在時,則核取方塊初始狀態(是否被選中)由ng-checked的值來決定,但是它繫結的變數的值是不會隨核取方塊選中狀態的改變而改變的,是固定值。

菜鳥一枚,寫得不好,多多指教!

全選或全不選

1.確定事件 最上面那個核取方塊的單擊事件 onclick 2.編寫函式 讓所有的核取方塊和最上面的核取方塊保持一致 a.獲取最上面這個核取方塊選中狀態 通過checkbox的checked屬性即可 b.獲取其他的核取方塊,設定他們的checked屬性即可 可以通過 document.getelem...

vue實現全選全不選

全選功能可以說是前端開發中非常常見的乙個功能,以前的專案開發用jquery開發比較多。最近在使用vue前端框架重構之前的專案。從jquery到vue的轉變主要是乙個思想想的轉變,是將原有的直接操作dom的思想轉變到運算元據,用資料驅動dom,也是vue框架的乙個核心思想,思想轉變過來,對功能的實現自...

checkbox全選和全不選

每次寫都會出現問題,每次.jquery1.6之後改了prop 可是attr也可以用,我這裡,checkall click function else var flag true input name checkbox each function else if flag else 這樣在html或其...