Manipulating Choices (Multiselect OptionSet) via JavaScript

Hi, in this code sample, I would like to share some common functions to manipulate Choices columns (Multiselect OptionSets) using JavaScript/jQuery:

function GetChoicesValue(fieldName) {
 var choicesField = $("#" + fieldName + "_Container");

 var selectedValues = [];
 choicesField.find('.msos-selected-display-item').each(function () {
 selectedValues.push($(this).data('value'));
 });
 console.log(selectedValues);
 return selectedValues;
};


function SetChoicesValues(fieldName, valuesToSelect, clearSelectedChoices) {
 var choicesField = $("#" + fieldName + "_Container");

 if (!valuesToSelect || !valuesToSelect.length) {
 return;
 }

 if (!!clearSelectedChoices) {
 ClearChoicesValues(fieldName)
 }

 valuesToSelect.forEach(function (item) {
 var valuesSelected = GetChoicesValue(fieldName);
 if (!!valuesSelected && valuesSelected.indexOf(item) == -1) {
 var checkboxDataItem = choicesField.find("li>>input.msos-checkbox[value='" + item + "']");
 if (!!checkboxDataItem) {
 checkboxDataItem.click();
 }
 }
 });
};

function ClearChoicesValues(fieldName) {
 var choicesField = $("#" + fieldName + "_Container");
 var checkboxDataItem = choicesField.find("li>>input.msos-checkbox");
 if (!!checkboxDataItem) {
 checkboxDataItem.trigger('change', false);
 }
};

function SelectAllChoicesValues(fieldName) {
 var choicesField = $("#" + fieldName + "_Container");
 var checkboxDataItem = choicesField.find("li>>input.msos-checkbox");
 if (!!checkboxDataItem) {
 checkboxDataItem.trigger('change', true);
 }
};

To test the functions above, all you need to do is all the functions by passing your column name as parameter:

GetChoicesValue("cr285_choices");
SetChoicesValues("cr285_choices",[4,5],false);
SetChoicesValues("cr285_choices",[4,5],true);
ClearChoicesValues("cr285_choices");
SelectAllChoicesValues("cr285_choices");