不用圖片作背景CSS做的小燈籠效果_練習(xí)用
695
2024-04-03
在我們平常的開(kāi)發(fā)中，有時(shí)候會(huì)需要獲取一下check框選中的值，以及check框選中行的所有信息。這個(gè)時(shí)候有一個(gè)小技巧那就是我們可以把要獲取的信息全部放到check框的值里面，這樣我們可以獲取check框選中值的時(shí)候也就相當(dāng)于獲取了當(dāng)前行的信息。
<td><input class="states" type="checkbox" name="orders" value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/></td>
全選全不選：
var bischecked=$('#cboxchecked').is(':checked');
var fruit=$('input[name="orders"]');
fruit.prop('checked',bischecked);
這里為什么要用prop而不用attr,這是因?yàn)?/p>
對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
獲取選中的值:
$('input[name="orders"]:checked').each(function(){
var sfruit=$(this).val();
var orders=sfruit.split(",");
var reminder=new Object();
reminder.merchantId=orders[0];
reminder.orderCode=orders[1];
reminder.userId=orders[2];
});
angularjs實(shí)現(xiàn):
使用angularjs我們不用去操作dom,我們只需要去關(guān)心這個(gè)值的狀態(tài);
首先看一下html代碼：
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://www.gimoo.net/t/1903/script2.js"></script>
</head>
<body data-ng-controller="AddStyleCtrl">
<div>Choose Tags</div>
<div>
<div>You have choosen:</div>
<hr>
<label data-ng-repeat="selectedTag in selectedTags">
(({{selectedTag}}))
</label>
<hr>
<div data-ng-repeat="category in tagcategories">
<div>{{ category.name }}</div>
<div data-ng-repeat="tag in category.tags">
<div>
<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
{{ tag.name }}
</div>
</div>
<hr>
</div>
</div>
<pre>{{selected|json}}</pre>
<pre>{{selectedTags|json}}</pre>
</body>
</html>
line2 定義了AngularJS App；
line4 引入angularjs腳本；
line5 引入自己寫(xiě)的script2.js腳本；
line7 指定控制器AddStyleCtrl
line13-15 實(shí)時(shí)顯示已選標(biāo)簽給用戶(hù)看；
line17-line26 使用雙重循環(huán)列出數(shù)據(jù)庫(kù)（本例中就存儲(chǔ)在了controller的一個(gè)對(duì)象里）中的數(shù)據(jù)；
line21的這行代碼作用可大了：<inputtype="checkbox" id={{tag.id}}name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
存儲(chǔ)了tag的id，name，利用isSelected(tag.id)來(lái)判斷是否被checked，點(diǎn)擊時(shí)候調(diào)用updateSelection($event,tag.id)方法；
如果想 ng-click 觸發(fā)的函數(shù)里獲取到該觸發(fā)該函數(shù)的元素不能直接傳入 this ，而需要傳入event。因?yàn)樵贏ngularjs里面，這個(gè)地方的this是 scope 。我們可以傳入 event，然后在函數(shù)里面通過(guò) event.target 來(lái)獲取到該元素。
line29-30 是測(cè)試時(shí)候給自己看的，可以看到selected數(shù)組和selectedTags數(shù)組中的內(nèi)容；
然后看看AngularJS代碼：（script2.js）
/**
* Created by zh on 20/05/15.
*/
// Code goes here
var iApp = angular.module("App", []);
iApp.controller('AddStyleCtrl', function($scope)
{
$scope.tagcategories = [
{
id: 1,
name: 'Color',
tags: [
{
id:1,
name:'color1'
},
{
id:2,
name:'color2'
},
{
id:3,
name:'color3'
},
{
id:4,
name:'color4'
},
]
},
{
id:2,
name:'Cat',
tags:[
{
id:5,
name:'cat1'
},
{
id:6,
name:'cat2'
},
]
},
{
id:3,
name:'Scenario',
tags:[
{
id:7,
name:'Home'
},
{
id:8,
name:'Work'
},
]
}
];
$scope.selected = [];
$scope.selectedTags = [];
var updateSelected = function(action,id,name){
if(action == 'add' && $scope.selected.indexOf(id) == -1){
$scope.selected.push(id);
$scope.selectedTags.push(name);
}
if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx,1);
$scope.selectedTags.splice(idx,1);
}
}
$scope.updateSelection = function($event, id){
var checkbox = $event.target;
var action = (checkbox.checked?'add':'remove');
updateSelected(action,id,checkbox.name);
}
$scope.isSelected = function(id){
return $scope.selected.indexOf(id)>=0;
}
});
