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

Question

I am developing application to bind the checkbox for role based menu. In that, I have parent-child check box and I want to bind the checkbox checked value from the input 1, 1.1, 1.2, 2, 3 .

I have googled many things and implemented few too but there is no idea for parent child checked values selection.

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>

Binding Input

1, 1.1, 1.2, 2, 3

Expected Selection

Answer 1

I guess you want to set the checkbox to checked based on the input, if so then you can try this:

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)
  }
}

Please note I did add the class check_container to the first ul

Demo

 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>