关于复选框显示问题。

如何选择一个或者多个复选框的时候，数字显示在div中呢，思路比较乱，谢谢！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="checkbox">123<br/>
<input type="checkbox">456<br/>
<input type="checkbox">789<br/>
<input type="checkbox">563<br/>
<input type="checkbox">156<br/>
<input type="checkbox">110<br/>

  <div style="width:290px; height:50px; border:1px solid;">
</div>
</body>
</html>

使用angular来控制：

在每一个复选框上添加一个点击事件
在controller里定义点击事件，接收复选框的值作为参数，每次加在一个数组中
使用ng-bind将数组绑定到div中


    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    //请换成本地或联网可用的angular库
    <script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="testApp" ng-controller="testCtrl as ctrl">
<input type="checkbox" ng-click="ctrl.addValue(123)">123<br/>
<input type="checkbox" ng-click="ctrl.addValue(456)">456<br/>
<input type="checkbox" ng-click="ctrl.addValue(789)">789<br/>
<input type="checkbox" ng-click="ctrl.addValue(563)">563<br/>
<input type="checkbox" ng-click="ctrl.addValue(156)">156<br/>
<input type="checkbox" ng-click="ctrl.addValue(110)">110<br/>

<div style="width:290px; height:50px; border:1px solid;" ng-bind="ctrl.numList">
</div>

<script>
    angular.module("testApp", [])
            .controller("testCtrl", [function () {
                var self = this;
                self.numList = [];
                self.addValue = function (num) {
                    self.numList += num;
                }
            }]);
</script>
</body>
</html>

在复选框的value值哪里写上对应的值就比较方便选取后写入div了，不然就得从下一节点的nodevalue值考虑，麻烦一点

用Vue实现超简单：

<div id='test'>
    <input type="checkbox" v-model="checkedNums" value='123'>123<br/>
    <input type="checkbox" v-model="checkedNums" value='456'>456<br/>
    <input type="checkbox" v-model="checkedNums" value='789'>789<br/>
    <div style="width:290px; height:50px; border:1px solid;" ng-bind="ctrl.numList">
        {{ checkedNames | json }}
    </div>

</div>
<script> 
  new Vue({
  el: 'test',
  data: {
    checkedNames: []
  }
})
</script>

通过jquery给div来设text

思路如下：

监听checkbox点击事件；
判断是否选中，获取选中checkbox的值；
往div中追加内容;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
</head>

<body>
  <input type="checkbox" name="test" value="123">123
  <br/>
  <input type="checkbox" name="test" value="456">456
  <br/>
  <input type="checkbox" name="test" value="789">789
  <br/>
  <input type="checkbox" name="test" value="563">563
  <br/>
  <input type="checkbox" name="test" value="156">156
  <br/>
  <input type="checkbox" name="test" value="110">110
  <br/>
  <div style="width:290px; height:50px; border:1px solid;">
  </div>
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
  //改这些复选框统一的name属性，比如name="test",加上对应的value值
  $('input[name=test]').change(function() {
    var arr = []
    $('input[name=test]:checked').each(function(i, v) {
        arr.push($(v).val())
    })
    $('div').html(arr.join(','))
  })
  </script>
</body>

</html>

【热门文章】