Получить родительские дочерние проверенные значения как разделенные запятой

Question

Я разрабатываю приложение для выбора меню на основе ролей. В этом у меня есть флажок parent-child, и я хочу получить проверенное значение флажка как 1, 1.1, 1.2, 2, 3 , но текущий jQuery возвращает как 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>

Jquery

$('.check_box:checked').map(function () { return this.value; }).get().join(',')

Выбор флажка

Токовый выход

1, 1, 2, 2, 3

Ожидаемый результат

1, 1,1, 1,2, 2, 3

Answer 1

Если у вас есть возможность добавлять атрибуты данных, это довольно просто ...

$(function(){
  $(".check_box").on("click", function() {
    console.clear();
    console.log($(".check_box:checked").map((i,el) => $(el).data("value")).get().join(","));
  });
});

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

---

Однако, если вам нужно придерживаться HTML, который у вас есть ... это не совсем элегантно (на самом деле это что-то , но изящно), но следующее будет делать то, что вам нужно ...

Он также имеет то преимущество, что вы можете многократно вкладывать <ul>, и это приведет к 1.1.1 и т. Д.

$(function(){
  $(".check_box").on("click", function() {
    var values = buildValues($("#root"),"");
    if (values.length > 0) {
      values = values.substring(0, values.length - 1);
    }
    console.clear();
    console.log(values);
  });
});

function buildValues($ul,parentValue) {
  var values = "";
  // Go though each listitem
  $ul.children("li").each(function() {
    // Get the checkbox and the value
    var $chk = $(this).children().first();
    var value = $chk.val().toString();
    // If the checkbox is ticked, add the value to the string
    if ($chk.is(":checked")){
      values += parentValue + value + ",";
    }
    // See if there is another element
    var $subUL = $chk.next();
    if ($subUL.length > 0) {
      // Recurse using the current value
      values += buildValues($subUL, value + ".");
    }
  });
  return values;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="root">
  <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>