CODEWITHSUNDEEP
jqueryhtmlcheckbox
Vignesh Kumar A
Vignesh Kumar A

Reputation: 28413

Retrieve parent child checked values as comma separated

I am developing application to select the role based menu. In that, I have parent-child check box and I want to retrieve checkbox checked value as 1, 1.1, 1.2, 2, 3 but current jQuery return as 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>

Jquery

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

Checkbox Selection

enter image description here

Current output

1, 1, 2, 2, 3

Expected Output

1, 1.1, 1.2, 2, 3

Upvotes: 0

Views: 102

Answers (1)

freefaller
freefaller

Reputation: 19963

If you have the ability to add data attributes, it's fairly simple...

$(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>

However, if you must stick with the HTML you've got... it's not exactly elegant (in fact it's anything but elegant), but the following will do what you need it to...

It also has the advantage that you can multiple nest the <ul> and it will result in 1.1.1 etc.

$(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>

Upvotes: 3

Related Questions