问

javascript - 关于复选框显示问题。

落花飞雪277590089 发布于 2022-11-11 12:11

html

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

无标题文档 123
456
789
563
156
110

6 个回答

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

2022-11-12 11:03 回答

FM向前
思路如下：
1. 监听checkbox点击事件；
2. 判断是否选中，获取选中checkbox的值；
3. 往p中追加内容;
2022-11-12 11:03 回答

捡到宝开封
通过jquery给p来设text

2022-11-12 11:03 回答

拾_间

用Vue实现超简单：

<p 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/>
    <p style="width:290px; height:50px; border:1px solid;" ng-bind="ctrl.numList">
        {{ checkedNames | json }}
    </p>

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

2022-11-12 11:03 回答

keleesen

使用angular来控制：

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

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    //请换成本地或联网可用的angular库
    <script src="node_modules/angular/angular.js?1.2.1"></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/>

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

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

2022-11-12 11:03 回答

疯疯癫癫丶是一种掩饰_954

<!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/>
  <p style="width:290px; height:50px; border:1px solid;">
  </p>
  <script src="jquery.min.js?1.2.1"></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())
    })
    $('p').html(arr.join(','))
  })
  </script>
</body>

</html>

2022-11-12 11:03 回答

到底是谁额额额

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签