以逗号分隔检索父子检查值

Question

我正在开发应用程序以选择基于角色的菜单。在这种情况下，我有一个父子复选框，我想将复选框选中的值检索为 1、1.1、1.2、2、3 ，但当前的jQuery返回的是 1、1、2、2 ，3 。

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

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>