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

Question

我正在开发应用程序来选择基于角色的菜单。在那，我有父子复选框，我想将复选框选中的值检索为 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>