How to Highlight Selected Items inside Checkbox List K2 Smartform.

Hello There, let’s see a simple CSS & JavaScript technique to highlight the selected items of a checkbox list inside a K2 smart form.

As you know K2 choice control as a checkbox list doesn’t have much options to highlight the selected items, we can use this simple JavaScript code to highlight the background of selected items which will update automatically on change of selection. Please find the script below.

<script>

$(“.checked”).css(“background-color”, “#d4ffaa”);

$(‘[name=”ChoiceData”]:checkbox’).on(‘change’, function(){

   if(this.checked)

    {

        this.parentElement.setAttribute(‘style’, ‘background-color: #d4ffaa;’);

    }

    else{

      this.parentElement.setAttribute(‘style’, ‘background-color: white;’);

   }

});

</script>

Change the name inside the script as per your Choice control’s name, in my case choice control’s name is “ChoiceData”

Inject this script into smartform using a datalabel and expression and that’s it. Check the magic as shown in demo below.

Note: Here I have used Choice Control as Checkbox List. I haven’t tested this with actual CheckBox List Control.