Dynamic Background Color and Checkboxes

Design help CMS
1

Hello,

I’m trying to add a dynamic background color to a custom checkbox when clicked it should display the corresponding color shown on the CMS but for some reason it’s not working.

Here it is when it’s checked…

image
image1242×773 202 KB

image
image

Here is my public share link: LINK
(how to access public share link)

2

Did you ever figure this out? I’m trying to do this as well.

3

I needed to achieve the same and had to use custom code. It is not perfect, but it worked for what I needed.

I will explain what I did.

  1. I added the corresponding HEX colour into the collection as Plain Text (as well as the colour one). Let’s say I called it checkbox-colour

  2. Then, inside the collection where the checkboxes are displayed, I added a text element and pulled the content from that field checkbox-colour and hid the element.

  3. I put the following code in the 

//this function will take the colour and add an opacity
function hoverColor(element){
    let color = element.find('.your-checkbox__colour').text();   
    let rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
    + ',' + parseInt(color.slice(-4,-2),16)
    + ',' + parseInt(color.slice(-2),16)
    +',0.5)';

    return rgbaCol; 
  }

//this other function will set the background colour of the element you need to style. 
  function checkboxChecked(element){
    let color = element.siblings('.your-checkbox__colour').css("color");
    element.siblings('.your-checkbox__checkbox').css('background-color',  color );
    //console.log('checked. Color = ' + color);
  }
  1. I put the following code 
// define reusable functions
function getCheckboxColor(el) {
  return el.find('.your-checkbox__colour').text();
}

function setCheckboxBackgroundColor(el, color) {
  el.find('.your-checkbox__checkbox').css('background-color', color);
}

function setCheckboxTextColor(el, color) {
  el.find('.your-checkbox__checkbox').css('color', color);
}

// handle checkbox changes
$('input[type="checkbox"]').change(function() {
  var checkbox = $(this),
      checkboxWrapper = checkbox.closest('.w-checkbox.your_checkbox_parent_element'),
      isChecked = checkbox.prop('checked'),
      checkboxColor = getCheckboxColor(checkboxWrapper);

  if (isChecked) {
    setCheckboxBackgroundColor(checkboxWrapper, checkboxColor);
    setCheckboxTextColor(checkboxWrapper, 'white');
  } else {
    setCheckboxBackgroundColor(checkboxWrapper, 'transparent');
    setCheckboxTextColor(checkboxWrapper, '#969696');
  }
});

// handle mouseenter and mouseleave events
$('.w-checkbox.your_checkbox_parent_element').on('mouseenter', function(event) {
  var checkboxWrapper = $(this),
      checkbox = checkboxWrapper.find('input[type="checkbox"]'),
      isChecked = checkbox.prop('checked'),
      checkboxColor = getCheckboxColor(checkboxWrapper),
      backgroundColor = isChecked ? checkboxColor : hoverColor(checkboxWrapper);

  setCheckboxBackgroundColor(checkboxWrapper, backgroundColor);

  if (isChecked) {
    setCheckboxTextColor(checkboxWrapper, 'white');
  } else {
    setCheckboxTextColor(checkboxWrapper, '#969696');
  }
});

$('.w-checkbox.your_checkbox_parent_element').on('mouseleave', function(event) {
  var checkboxWrapper = $(this),
      checkbox = checkboxWrapper.find('input[type="checkbox"]'),
      isChecked = checkbox.prop('checked'),
      checkboxColor = getCheckboxColor(checkboxWrapper),
      backgroundColor = isChecked ? checkboxColor : 'transparent';

  setCheckboxBackgroundColor(checkboxWrapper, backgroundColor);

  if (isChecked) {
    setCheckboxTextColor(checkboxWrapper, 'white');
  } else {
    setCheckboxTextColor(checkboxWrapper, '#969696');
  }
});

To make it work, you have to match the classes accordingly to your project.
This code can for sure be refactored and presented in a better way. But is the solution I got for now.

Cheers!