[Resolved] Styling :checked Checkboxes in Views & Cred

[Author]

Posts

[rubenB]

Hello I'm having some trouble replacing the default browsers checkboxes with styled checkboxes, could you please advise me how the correct way is to do that?

hidden link

Right now I'm using jQuery to add the .checked class

    jQuery('.js-wpv-filter-trigger, .checkbox').click(function() {
      if(this.checked) { // check select status
          jQuery(this).parent().addClass('checked');
          }
      else  { // check select status
          jQuery(this).parent().removeClass('checked');
          }
        })
        jQuery().trigger('click');

 .checkbox label.checked::before  {
  content: "\f00c";
  font-family: "FontAwesome";
  font-size: 13px;
  background: #AAAAAA;
  color: #fff;
}

This works when the checkboxes are clicked, but not when a page is reloaded, prefilled from URL parameters, using a Cred Edit post form, etc.

I've tried replacing .click(function) with change, ready, but these don't seem to work at all...

My sincere apologies for the duplicate question. I've gotten confused with all the different previous tickets and especially with hidden links unable to see working example. If you could point me in the right direction that would be super appreciated.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi there,

Thank you for contacting us and I'd be happy to assist.

On my test website, passing on the value in the URL parameter updates the checkbox status on the page reload, but the same doesn't seem to work on your website.

To troubleshoot this in more detail, I'll need to see how this view and the search fields are set up in the admin area so that it can be reproduced on a test website.

Can you please share temporary admin login details and also some example links, with URL parameters that you were testing with?

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for sharing the admin access and further details.

Since your checkbox styling depends on the presence of "checked" class in the parent "label" tag, you'll need to include an additional script that executes on the page load and appends that class, to all "checked" checkbox inputs.

Example:

jQuery(document).ready(function() {

  jQuery('.checkbox input[type="checkbox"][checked="checked"]').parent().addClass('checked');

});

I hope this helps and for even better ideas and suggestions around custom JS script, you can consult specialized community forums like:

hidden link
https://stackoverflow.com

regards,
Waqar

[rubenB]

Thanks Waqar! That makes sense and I'm sure I'll know better for next time.

Yes I need to go and learn more of jQuery!