Question

Is it possible to sort checkbox options alphabetically?

Forms

Updated July 20, 2017

asked on July 20, 2017

I have several checkboxes whose labels and selected values are being populated from a database. This is working very well. I wanted to see if it was possible, to re-organize the sort order of the checkbox fields when the form is loaded (without messing up the selected options).

Say for example, my checkbox looked like this:
O Label=Fruit Value=A Checked=False
X Label=Veggies Value=B Checked=True
O Label=Bread Value=C Checked=False
X Label=Drink Value=D Checked=True
O Label=Dessert Value=E Checked=True

It could be re-sorted like this:
O Label=Bread Value=C Checked=False
O Label=Dessert Value=E Checked=True
X Label=Drink Value=D Checked=True
O Label=Fruit Value=A Checked=False
X Label=Veggies Value=B Checked=True

It's now sorted alphabetically by the label, but the values and checked options have remained the same, following the labels.

After searching both this forum and Google, and trying several bits of code, I was not able to find a solution.

So I'm curious, has anyone ever done anything like this before?

0 0

Answer

SELECTED ANSWER

replied on July 20, 2017 • Show version history

Hi Matthew,

You can try the following script for sorting (checkbox field has CSS class myCheckbox):

$(document).ready(function(){
  $('.myCheckbox span.choice').parent().append($('.myCheckbox span.choice').detach().sort(function(a,b){
    return $(a).find('.form-option-label').text().toUpperCase().localeCompare($(b).find('.form-option-label').text().toUpperCase());
  }));
})

Besides, since Forms lookup rule does not apply to checkbox fields, so I wonder how you populated the labels from a database? Using custom JavaScript? My script assumes that labels and values are already populated on form load, so if it does not work, can you post your existing script here?

2 0

Replies

replied on July 20, 2017 • Show version history

@████████- you are amazing! That worked perfectly. Exactly what I was looking for! Thank you so much!

You are correct, I'm updating the checkbox labels via Javascript - I just inserted your code after I've done the label updates, and it sorts them perfectly.

If you're interested, here is the basics of how I'm re-doing the checkbox labels. My actual form is much more complex, but this is a simplified version that is easy to recreate:

First add a multi-line field on the form with CSS Class of "checkbox_values". Set its default value to "One|Two|Three|Four|DISABLED|DISABLED|Seven|Eight|DISABLED|Ten". This is what is being populated from my database (populated via Workflow) and this is what will serve the basis of the checkbox labels. The Javascript will label the checkboxes as those ten values that are separated by pipes ( | ) - if you don't want to use the numbers, you can use pretty much anything else. The code will also hide the three checkboxes that are called "DISABLED".

Second, add a checkbox field on the form with CSS Class of myCheckbox. Keep it set to a 1 column layout (that's all I've tested with at least). Give it ten choices called A, B, C, D, E, F, G, H, I, and J - copy the list of choices to the values, so they are identical.

Then here's the Javascript. This includes the code I'd already written to update the checkbox labels, and the code you provided to sort them alphabetically.

$(document).ready(function(){
  
  //update all of the checkbox labels based on the value of the checkbox_values text box.  Hide any checkboxes with a label of DISABLED.
  var checkboxValues = $('.checkbox_values textarea').val().split('|');
  var checkboxCounter = 0; 
  $('.myCheckbox .choice label').each(function() { 
    $(this).text(checkboxValues[checkboxCounter]);
    if(checkboxValues[checkboxCounter] == 'DISABLED') { 
      $(this).parent().hide(); 
    }
    checkboxCounter++;
  }); 
  
  //sort the checkbox options alphabetically by their labels
  $('.myCheckbox span.choice').parent().append($('.myCheckbox span.choice').detach().sort(function(a,b){
    return $(a).find('.form-option-label').text().toUpperCase().localeCompare($(b).find('.form-option-label').text().toUpperCase());
  }));
  
});

When you preview your form, you should see the checkbox with seven options, showing these labels and values:
Eight / H
Four / D
One / A
Seven / G
Ten / J
Three / C
Two / B

One thing to note however, for this to work with the archival version of the form (i.e. the version sent to Laserfiche) I do have to make a copy of the form with some small tweaks to the Javascript:
1. where it says "textarea" on line 4 gets replaced with ".cf-field" (alternately, if I'd used a single line field I would be using "input" instead of "textarea", but I would still change it to ".cf-field").
2. where it says "val()" on line 4 gets replaced with "text()"

By the way, this works the same for Checkboxes or Radio buttons.

2 0

You are not allowed to follow up in this post.

Question

Question

Is it possible to sort checkbox options alphabetically?

Answer

Replies

Sign in to reply to this post.