avalon全选全不选怎么写

苟且
  • 76

这时给出的例子 循环的arr是个简单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>    
    <div ms-controller="box">
      <ul>
          <li><input type="checkbox" ms-click="checkAll" ms-attr-checked="checkAllbool"/>全选</li>
          <li ms-repeat="arr" ><input type="checkbox" ms-attr-value="el" ms-duplex="selected"/>{{el}}</li>
      </ul>
  </div>
  <script src="https://cdn.bootcss.com/avalon.js/1.5.9/avalon.min.js"></script>
  <script>
      var vm = avalon.define({
          $id: "box",
          arr : ["1", '2', "3", "4"],
          selected : ["2", "3"],
          checkAllbool : false,
          checkAll : function() {
              if (this.checked) {
                  vm.selected = vm.arr
              } else {
                  vm.selected.clear()
              }
          }
      })
      
  </script> 
</body>
</html>

把arr改成包含对象的数组之后怎么实现全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>    
    <div ms-controller="box">
      <input type="checkbox" ms-click="checkAll" ms-attr-checked="checkAllbool"/>全选
      <br>
      <label ms-repeat-el="arr">
          <input type="checkbox" ms-duplex-checked="el.checked"> {{el.v}}&nbsp;&nbsp;
      </label>
  </div>
  <script src="https://cdn.bootcss.com/avalon.js/1.5.9/avalon.min.js"></script>
  <script>
      var vm = avalon.define({
          $id: "box",
          arr : [{
                  "v": "111",
                  "checked": true
                },
                {
                  "v": "222",
                  "checked": false
                }],
          checkAllbool : false,
          checkAll : function() {
              if (this.checked) {
                  for (var i = 0; i < vm.arr.length; i++) {
                    vm.selected = vm.arr[i]
                  }
                  //vm.selected = vm.arr
              } else {
                  //vm.selected.clear()
              }
          }
      })
      
  </script> 
</body>
</html>
回复
阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏