Добавление классов в контактную форму 7 флажков с JQuery

Question

Я использую контактную форму 7 для создания формы с флажками. Я хотел бы иметь возможность назначить изображение для каждого флажка. Единственный способ понять, как это сделать, - использовать: перед тем, как в оболочке оборачивать ввод и метку, но это означает, что мне нужно иметь возможность получить доступ к каждому флажку с помощью CSS.

Для этого я объединил скрипт, который создал идентификатор на входе флажка, с именем ввода автоматически и селектором jquery: has для назначения моих классов родителю, а не вводу.

jQuery(document).ready(function($){

    $('form.wpcf7-form input').each(function(){
      var span = $(this).parent('span');
      if(span){
        var idAttr = span.attr('id');
        $(this).attr('id',idAttr);
        span.attr('id','');
      }
      var name = $(this).attr('name');
      var type = $(this).attr('type');
      switch(type){
        case 'radio':
        case 'checkbox':
          name += '-'+$(this).attr('value');
          name = name.replace(/\s+/g, '-').replace(/[&<>"'\/]/g, '').toLowerCase(); //replace spaces with dash, remove question mark, and convert to lowercase
      }
      $(this).attr('id',name);
    });

    $( "span:has(label>input#problèmes-de-fuites)" ).addClass( "fuites" );
    $( "span:has(label>input#chaudières-radiateurs)" ).addClass( "radiateurs" );

});

Мой вопрос: есть ли способ автоматизировать это, чтобы мне не приходилось вручную вводить все классы? ТАК, что сценарий будет вводить идентификатор в диапазон, а не входные данные, зная, что диапазон является родительским:

<span class="name that i get manually and want to automate">
    <label>
        <span>Checkbox title</span>
        <input name="name used by script" id="name replicated automatically">
    </label>
</span>

Я новичок в jquery, поэтому сам не могу понять.

Или есть лучший способ сделать это вообще?