jQuery sort checkboxes inside div's based on value

Question

I have a couple of checkboxes being generated by a plugin in Wordpress. I don't have the option to sort these checkboxes so I would like to have them sorted based on their value, with the highest first.

the HTML generated looks like this:

<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
        <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
            <div class="wpgmza_cat_checkbox_item_holder_first">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
                <div>
                    <label for="wpgmza_cat_checkbox_0">All</label>
                </div>
            </div>
            <div class="wpgmza_cat_checkbox_item_holder">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1">
                <div>
                    <label for="wpgmza_cat_checkbox_1">Airco</label>
                </div>
            </div>
            <div class="wpgmza_cat_checkbox_item_holder">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2">
                <div>
                    <label for="wpgmza_cat_checkbox_2">Vent</label>
                </div>
            </div>
        </div>
    </div>

I tried the following code:

function sortByID(a, b)
{
return (a.children(“input”).val() > b.children("input").val()) ? 1 : -1;
}

var container = jQuery("div.wpgmza_filter_container");
container.children("div").sort(sortByID).appendTo(container);

Firstly, please include the code you've tried yourself. Secondly, should the 'All' option remain the first one, regardless of its value? — Rory McCrossan
– Rory McCrossan, Commented May 22, 2017 at 19:06
...aaaaand your question is? Please show us what code you tried which didn't work, including any errors. We won't write your code for you but we'll help you fix a problem you have. — j08691
– j08691, Commented May 22, 2017 at 19:06

Rory McCrossan · Accepted Answer · 2017-05-22 19:19:14Z

4

The issue with your sort logic is that you're comparing strings, and you're also sorting the children of .wpgmza_filter_container, of which there is only one. You need to instead sort the children of .wpgmza_cat_checkbox_holder. You are also using an invalid double quote character in your sort logic. Try this:

function sortByValue(a, b) {
  var aVal = parseInt($(a).find('input').val(), 10),
    bVal = parseInt($(b).find('input').val(), 10);
  return aVal < bVal;
}

var $container = $("div.wpgmza_cat_checkbox_holder");
$container.children("div").sort(sortByValue).appendTo($container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
  <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
    <div class="wpgmza_cat_checkbox_item_holder_first">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
      <div>
        <label for="wpgmza_cat_checkbox_0">All</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1">
      <div>
        <label for="wpgmza_cat_checkbox_1">Airco</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2">
      <div>
        <label for="wpgmza_cat_checkbox_2">Vent</label>
      </div>
    </div>
  </div>
</div>

If you want to ensure that the 'All' selection remains first in the list, you can exclude the filter logic from that div using :not:

$container.children('div:not(".wpgmza_cat_checkbox_item_holder_first")').sort(sortByValue).appendTo($container);

answered May 22, 2017 at 19:19

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Death-is-the-real-truth Over a year ago

very fast and descriptive. +1 .No wonder you have such a good reputation

Death-is-the-real-truth Over a year ago

BTW his html structure not changed at all, so swipe of values will be also ans option?Isn't it?(for this particular case only not in general)

Collectives™ on Stack Overflow

jQuery sort checkboxes inside div's based on value

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related