Angularjs Ng_repeat中實現複選框選中並顯示不同的樣式
頁面程式碼:
<!-- 彈出層 --> <section class="popup-bg" ng-if="IsActive"> <div class="popup-box phone-detail"> <div class="popup-title popup-detail-title">通訊錄 <i class="iconfont popup-close-font rights " ng-click="HideMail()"></i> </div> <div class="content"> <div class="phone" ng-repeat="User in NoticeUserList">{{User.Name}} <div class="check-item rights"> <div class="check-bg" ng-class="{true:'checkeds',false:'uncheckeds',}[active]"> </div> <input type="checkbox" ng-model="active" class="checkboxs" value="User.Name" ng-click="itemSelected($event,User.Id,active)"> </div> </div> </div> </div> </section> Controller中程式碼:
$scope.itemIds = [];$scope.active = false; $scope.itemSelected = function ($event, pid, active) { var checkbox = $event.target; if (checkbox.checked) { $scope.itemIds.push(pid); } else { $scope.itemIds = Tools.arrRemove($scope.itemIds, pid); } console.log(active); console.log($scope.itemIds); }; 總結: 此處開始寫的時候沒有使用NG-MODEL,導致複選框選中一個,其他的複選框樣式都跟著變化了,重點就是加上NG-MODEL,並且和NG-CLASS設定的[]中的名稱一致即可。
相關推薦
Angularjs Ng_repeat中實現複選框選中並顯示不同的樣式
頁面程式碼: <!-- 彈出層 --> <section class="popup-bg" ng-if="IsActive"> <div class="popu
如何在點選事件中取得複選框選中的單元格值
var products = []; var ordernums = []; var ordernums1 = []; var $span = $('.fr-checkbox-checkon'); //獲取選中的複選框 var $tds = $("td"
Vue中CheckBox複選框實現單選效果
為什麼有radio不用,偏偏要使用CheckBox實現單選效果呢? 答案是如果想同時實現單選,又實現可以一個都不選的話。只能使用CheckBox來做了。 通過jQuery來做 實現思路: 1.如果當前物件不選中:去除當前物件的選中狀態 2.如果當前物件選中:
JS中,複選框(checkbox) 選中,按鈕(button)可用,否則按鈕不可用
<body> <input type="checkbox" id="checkbox" onclick="check()"/>同意協議 <br /> <input type="button" id="button" value
下拉框中可以實現複選框
(1)要實現的介面形式如下: 下面是jsp頁面中的寫法: <!-- 下面是下拉框中含有複選框。要是能夠傳值,必須重寫easyui——combox,用js新增複選框--> <tr> <td
jquery獲取input輸入框中的值、radio單選框選中的值、checkbox複選框選中的值
1)jquery獲取input輸入框中的值 如何用jquery獲取<input id="test" name="test" type="text"/>中輸入的值? $(" #test ").val() $(" input[ name='test' ] ").va
angularjs中的複選框checkbox
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js
選中複選框 獲取複選框後面文字 顯示在div中 取消選中 則不顯示
<div class="am-form-group" style="height: auto; width: 30%;"> <label for="user-phone"
怎麼把PHP中複選框選中的多個值寫入到資料庫中
今天提交表單數到據庫時,CheckBox選中的值不能夠全部提交,浪費了很長時間,最後解決方法如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ
jq實現複選框聯級選中和取消動作
圖例如下: <script> //獲取當前的複選框 $('input[name=pri_id_list[]]').click(function(){
HTML中checkbox復選框選中及沒選中值的生成
BE 功能 分享 com gpo span 標簽 size strong 只需在input標簽中加入 onclick="this.value=(this.value==0)?1:0" <input type="checkbox" name="rememberMe"
jQuery實現複選框單選
這裡職務只能勾選一個,所以我打算實現複選框只能單選的功能。 實現思路: 遍歷每一個checkbox,如果有一個選中,其他的就預設未選中狀態,從而實現checkbox單選功能。 js程式碼: //checkbox實現單選 $("input[name='job']:checkb
【JS】用checked實現複選框全選和全不選
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title>
js實現複選框的全選 取消全選
html虛擬碼 <table> <tr> <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td>
js實現複選框的多選,全選,反選
多選,全選,反選 js實現複選框的多選,全選,反選 js實現複選框的多選,全選,反選 <table> <thead> <tr> <th><input type="checkbox"
js實現複選框全選/全不選/反選
js實現複選框全選/全不選/反選 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &
JQuery 實現複選框全選反選功能
HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty
多個複選框選中事件 選中更改父層class樣式
html <ul class="grid"> <li class="item"> <input type="checkbox" name="check"/> <li cl
如何在sql查詢中引用提示頁面中的複選框引數
新做了一張報表,由於模型裡面沒有,所以必須用sql寫,在這裡碰到一個瓶頸: sql裡面要引用到提示頁面的一個引數,這個引數是複選框引數: 查詢裡面的sql是這樣寫的: 其中畫橫線的部分#prompt(‘year’,‘CHAR(4)’)#是年引數,在提示頁面中是單選值提示
ztree複選框選中事件
callback: { //樹複選框選中事件