一直觉得网页上checkbox和radio挺恶心的,不知道大家有没有同感,今天小小总结一下,如有错误,还请斧正。
先看angularjs吧(用的是foundation的框架):
radio:
<input type="radio" name="optionsRadios" id="1" value="1" ng-model="q.radioModel"><label>{{q.options1}}</label>
<input type="radio" name="optionsRadios" id="2" value="2" ng-model="q.radioModel"><label>{{q.options2}}</label>
<input type="radio" name="optionsRadios" id="3" value="3" ng-model="q.radioModel"><label>{{q.options3}}</label>
ok,上面是3个radio,其ng-model=”q.radioModel”,这样就与后台数据的radioModel绑定了,这里注意一下,当某个radio被选中后,radioModel取到的值是radio的value值,即这里的1,2,3
checkbox:
方法一:
与radio类似,
<input id="checkbox1" type="checkbox" ng-model="c.c1"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox" ng-model="c.c2"><label for="checkbox2">Checkbox 2</label>
这样的话在js里跟踪c对象就可以了。
当然,如果要在选中的时候处理一些事件,那就放在ng-click中:
$scope.c={
c1:false,
c2:false
};
//在checkbox中加上ng-click="testcb()"
$scope.testcb= function () {
var n=$scope.c.c1;
var m=$scope.c.c2;
}
方法二:
该方法是找的网上的,当然亲测有效哦~
<input type="checkbox" value={{msg.msgId}}
ng-checked="isSelected(msg.msgId)"
ng-click="updateSelection($event,msg.msgId)"/>
$scope.selected = [];
$scope.isSelected = function(id){
return $scope.selected.indexOf(id)>=0;
}
$scope.updateSelection = function($event, id){
var checkbox = $event.target;
var action = (checkbox.checked?'add':'remove');
updateSelected(action,id);
}
var updateSelected = function(action,id){
if(action == 'add' && $scope.selected.indexOf(id) == -1){
$scope.selected.push(id);
}
if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx,1);
}
}
//遍历被选中的checkbox在上面方法中所保存的值(比如在提交的时候调用),这里保存的是msg.msgId
if($scope.selected.length>0){
var msg="";
for(var i=0;i<$scope.selected.length;i++){
msg+=$scope.selected[i]+",";
}
}
讲道理,推荐方法一,简单易懂,而且也是利用了angular的特性,方法二的话,比较笨。
好的,到jQuery了:
jQuery关键是利用了自己的对象来取HTML元素。
radio:
var answer = $('input:radio:checked');
checkbox:
$("input:checkbox").each(function () {
if ($(this).prop("checked")) {
var value = $(this).attr("value");
}
});
取元素的语法自己百度下咯~
正因为jQuery可以方便的取HTML元素,所以你也可以在页面上指定radio和checkbox的id,然后$(‘#html-id’)取得相应元素,再获取其选中属性,当然如果选框是动态生成的,那还是通过类型选择方便些。