AngularJS和JQuery之checkbox和radio

一直觉得网页上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’)取得相应元素，再获取其选中属性，当然如果选框是动态生成的，那还是通过类型选择方便些。