将复选框值绑定到父子模型

Question

我正在开发应用程序来绑定基于角色的菜单的复选框。在那里，我有父子复选框，我想从输入 1, 1.1, 1.2, 2, 3.

绑定复选框选中的值

我在谷歌上搜索了很多东西，但实现的也很少，但是不知道父子检查值的选择。

HTML

<ul>
  <li><input class="check_box" type="checkbox" value="1">Upload
    <ul>
      <li><input class="check_box" type="checkbox" value="1">Large </li>
      <li><input class="check_box" type="checkbox" value="2">Small </li>
    </ul>
  </li>
  <li><input class="check_box" type="checkbox" value="2">Move</li>
  <li><input class="check_box" type="checkbox" value="3">Producs</li>
  <li><input class="check_box" type="checkbox" value="5">User</li>
</ul>

绑定输入

1, 1.1, 1.2, 2, 3

预期选择

Answer 1

我猜你想根据输入将复选框设置为选中，如果是这样，那么你可以试试这个：

var bindingInput = "1, 1.1, 1.2, 2, 3".split(',');

for (var i = 0; i < bindingInput.length; i++) {
  var inputvalue = bindingInput[i].trim();
  if (inputvalue.indexOf('.') > 0) {
    var child = inputvalue.split('.');
    var ele = $('.check_container > li > .check_box[value=' + child[0] + ']');
    for (var t = 1; t < child.length; t++){
      ele = ele.next("ul").find(' > li > .check_box[value=' + child[t] + ']');
    }
    ele.prop("checked", true)
  } else {
    $('.check_container > li > .check_box[value=' + inputvalue + ']').prop("checked", true)
  }
}

请注意我确实将 class check_container 添加到第一个 ul

演示

var bindingInput = "1, 1.1, 1.2, 2, 3, 1.1.1".split(',');

for (var i = 0; i < bindingInput.length; i++) {
  var inputvalue = bindingInput[i].trim();
  if (inputvalue.indexOf('.') > 0) {
    var child = inputvalue.split('.');
    var ele = $('.check_container > li > .check_box[value=' + child[0] + ']');
    for (var t = 1; t < child.length; t++) {
      ele = ele.next("ul").find(' > li > .check_box[value=' + child[t] + ']');
    }
    ele.prop("checked", true)
  } else {
    $('.check_container > li > .check_box[value=' + inputvalue + ']').prop("checked", true)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="check_container">
  <li><input class="check_box" type="checkbox" value="1">Upload
    <ul>
      <li><input class="check_box" type="checkbox" value="1">Large
        <ul>
          <li><input class="check_box" type="checkbox" value="1">Large2 </li>
          <li><input class="check_box" type="checkbox" value="2">Large2 </li>
        </ul>
      </li>
      <li><input class="check_box" type="checkbox" value="2">Small </li>
    </ul>
  </li>
  <li><input class="check_box" type="checkbox" value="2">Move</li>
  <li><input class="check_box" type="checkbox" value="3">Producs</li>
  <li><input class="check_box" type="checkbox" value="5">User</li>
</ul>

将复选框值绑定到父子模型

Bind checkbox values to parent-child model

javascript

checkbox

jquery

bind